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 Grid Lines
A grid item can span over mulitiple columns or rows.
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 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
You 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:
Naming Grid Items with grid-area
The grid-area property can be used to assign names to grid items.
The named grid items can then be referred to by the
grid-template-areas property
of the grid container.
Example
Item1 gets the name "myArea" and spans all five columns in a five columns grid layout:
.item1 {
grid-area:
myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea
myArea myArea myArea';
}
Result:
Each row is defined by apostrophes (' ').
The named grid items in each row is defined inside the apostrophes, separated by a space.
Example
Let "myArea" span three columns in a five columns grid layout (period signs represent items with no name):
.item1 {
grid-area:
myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea
myArea . .';
}
Result:
Note: A period sign represents a grid item with no name.
To define two rows, define the second row inside another set of apostrophes:
Example
Let "item1" span two columns and two rows:
.item1 {
grid-area:
myArea;
}
.grid-container {
grid-template-areas:
'myArea myArea
. . .'
'myArea myArea . . .';
}
Result:
Example
Name all grid items, and make a ready-to-use webpage template:
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 {
grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area:
footer; }
.grid-container {
grid-template-areas:
'header header header header header header'
'menu main
main main main right'
'menu footer footer footer footer
footer';
}
Result:
The Order of the Grid Items
The grid-area property can also be used to
define the order of the grid items.
The first grid item in the HTML code does not have to appear as the first item in the grid.
Example
Define the order of the grid items:
/* place in row 1 column 3 */
.item1 {grid-area: 1 / 3;}
/* place in
row 2 column 3 */
.item2 {grid-area: 2 / 3;}
/* place in row 1
column 1 */
.item3 {grid-area: 1 / 1;}
/* place in row 1 column 2 */
.item4 {grid-area: 1 / 2;}
/* place in row 2 column 1 */
.item5
{grid-area: 2 / 1;}
/* place in row 2 column 2 */
.item6 {grid-area:
2 / 2;}
Result:
You can also re-arrange the order for certain screen sizes, with media queries:
Example
Re-arrange order on small devices:
@media only screen and (max-width: 500px) {
.item1 {grid-area: 1 /
span 3;}
.item2 {grid-area: 3 / 3;}
.item3 {grid-area: 2 /
1;}
.item4 {grid-area: 2 / 2 / span 2;}
.item5 {grid-area:
3 / 1;}
.item6 {grid-area: 2 / 3;}
}
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 |
