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 start
- grid-column-end - Specifies on which column-line the grid item will end
- grid-column - Shorthand property for grid-column-start and grid-column-end
- grid-row-start - Specifies on which row-line the grid item will start
- grid-row-end - Specifies on which row-line the grid item will end
- grid-row - Shorthand property for grid-row-start and grid-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
.item1 {
grid-column-start: 1;
grid-column-end: 3;
}Live preview
Expected output
1 2 3 4 5
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
.item1 {
grid-column: 1 / span
2;
}Live preview
Expected output
1 2 3 4 5
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
.item1 {
grid-row-start: 1;
grid-row-end: 3;
}Live preview
Expected output
1 2 3 4 5
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
.item1 {
grid-row: 1 / span 2;
}Live preview
Expected output
1 2 3 4 5
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
.item1 {
grid-column: 1 / span 2;
grid-row: 1 / span 2;
}Live preview
Expected output
1 2 3 4 5 6
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 |