CSS Grid Layout

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

Grid Container and Items

An element becomes a grid container when its display property is set to grid or inline-grid.

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto; /* 3-column grid */
    gap: 10px;
}

Grid Template Columns

The grid-template-columns property defines the number of columns in your grid layout, and it can define the width of each column.

/* Three columns with different widths */
.container {
    display: grid;
    grid-template-columns: 100px 200px auto;
}

Grid Template Rows

The grid-template-rows property defines the height of each row.

.container {
    display: grid;
    grid-template-rows: 150px 200px;
}

The gap Property

The gap (or grid-gap) property is a shorthand property for the row-gap and column-gap properties.

.container {
    display: grid;
    gap: 50px 100px; /* row-gap column-gap */
}