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 Elements

A grid layout consists of a parent element, with one or more child elements.

EXAMPLE:

Display Property

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

EXAMPLE:

.grid-container {
display: grid;
}

EXAMPLE:

.grid-container {
display: inline-grid;
}

Grid Columns

The vertical lines of grid items are called columns.

Grid Rows

The horizontal lines of grid items are called rows.

Grid Gaps

The spaces between each column/row are called gaps.

You can adjust the gap size by using one of the following properties:

- grid-column-gap
- grid-row-gap
- grid-gap

EXAMPLE:

The grid-column-gap property sets the gap between the columns:

.grid-container {
display: grid;
grid-column-gap: 50px;
}

EXAMPLE:

The grid-row-gap property sets the gap between the rows:

.grid-container {
display: grid;
grid-column-gap: 50px;
}

EXAMPLE:

The grid-gap property is a shorthand property for the grid-row-gap and the grid-column-gap properties:

.grid-container {
display: grid;
grid-gap: 50px 100px;
}

EXAMPLE:

The grid-gap property can also be used to set both the row gap and the column gap in one value:

.grid-container {
display: grid;
grid-gap: 50px;
}

Grid Lines

The lines between columns are called column lines.

The lines between rows are called row lines.

EXAMPLE:

Place a grid item at column line 1, and let it end on column line 3:

.item1 {
grid-column-start: 1;
grid-column-end: 3;
}

EXAMPLE:

Place a grid item at row line 1, and let it end on row line 3:

.item1 {
grid-row-start: 1;
grid-row-end: 3;
}