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-start
andgrid-column-end
grid-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-start
andgrid-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 |