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:
1
2
3
4
5
Try it Yourself »
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
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:
1
2
3
4
5
Try it Yourself »
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:
1
2
3
4
5
Try it Yourself »
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:
1
2
3
4
5
Try it Yourself »
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:
1
2
3
4
5
Try it Yourself »
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:
1
2
3
4
5
6
Try it Yourself »
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
★
+1
Sign in to track progress
