CSS Grid Items
CSS Grid Items
A grid container contains one or more grid items.
All direct child elements of a grid container automatically become grid items.
Below is a grid container with five grid items:
CSS Sizing/Spanning Grid Items
A grid item can span over mulitiple columns or rows.
We can specify where to start and end a grid item by using the following properties:
grid-column-start- Specifies on which column-line the grid item will startgrid-column-end- Specifies on which column-line the grid item will endgrid-column- Shorthand property forgrid-column-startandgrid-column-endgrid-row-start- Specifies on which row-line the grid item will startgrid-row-end- Specifies on which row-line the grid item will endgrid-row- Shorthand property forgrid-row-startandgrid-row-end
The lines between the columns in a grid are called column-lines, and the lines between the rows in a grid are called row-lines.
We can refer to line numbers when placing a grid item in a grid container.
CSS grid-column-start and grid-column-end
The grid-column-start property
specifies on which column-line the grid item will start.
The grid-column-end property
specifies on which column-line the grid item will end.
Example
Let the first grid item start at column-line 1, and end on column-line 3:
.item1 {
grid-column-start: 1;
grid-column-end: 3;
}
Result:
The CSS grid-column Property
The grid-column property is a shorthand property for the
grid-column-start and the
grid-column-end properties.
Example
Let the first grid item start at column-line 1, and let it span 2 columns:
.item1 {
grid-column: 1 / span
2;
}
Result:
CSS grid-row-start and grid-row-end
The grid-row-start property
specifies on which row-line the grid item will start.
The grid-row-end property
specifies on which row-line the grid item will end.
Example
Let the first grid item start at row-line 1, and end on row-line 3:
.item1 {
grid-row-start: 1;
grid-row-end: 3;
}
Result:
The CSS grid-row Property
The grid-row property is a shorthand property for the
grid-row-start and the
grid-row-end properties.
Example
Let the first grid item start at row-line 1, and let it span 2 rows:
.item1 {
grid-row: 1 / span 2;
}
Result:
Combine grid-column and grid-row
Here we use both the grid-column
and grid-row properties
to let a grid item span both columns and rows.
Example
Let the first grid item start at column-line 1, and let it span 2 columns, also let the first grid item start at row-line 1, and let it span 2 rows:
.item1 {
grid-column: 1 / span 2;
grid-row: 1 / span 2;
}
Result:
All CSS Grid Item Properties
| Property | Description |
|---|---|
| align-self | Aligns the content for a specific grid item along the column axis |
| grid-area | A shorthand property for the grid-row-start, grid-column-start, grid-row-end and the grid-column-end properties |
| grid-column | A shorthand property for the grid-column-start and the grid-column-end properties |
| grid-column-end | Specifies where to end the grid item |
| grid-column-start | Specifies where to start the grid item |
| grid-row | A shorthand property for the grid-row-start and the grid-row-end properties |
| grid-row-end | Specifies where to end the grid item |
| grid-row-start | Specifies where to start the grid item |
| justify-self | Aligns the content for a specific grid item along the row axis |
| place-self | A shorthand property for the align-self and the justify-self properties |
