CSS Naming Grid Items
Naming Grid Items with grid-area
The CSS
grid-template-areas is a
grid container property, and it specifies
areas within the grid layout.
You can name grid items by using the CSS grid-area
property, and then reference to the name in the grid-template-areas
property.
Each area is defined within apostrophes. The named grid items in each area is defined inside the apostrophes, separated by a space.
Example
Let "Item1" get the name "myHeader", and let it span five columns in a five columns grid layout:
.container {
display: grid;
grid-template-areas: 'myHeader
myHeader myHeader myHeader myHeader';
}
.item1 {
grid-area:
myHeader;
}
Result:
We can use a period sign (.) to refer to a grid item with no name:
Example
Let "myHeader" span three columns in a five columns grid layout (a period sign represent an item with no name):
.container {
display: grid;
grid-template-areas: 'myHeader
myHeader myHeader . .';
}
.item1 {
grid-area:
myHeader;
}
Result:
To define two rows (two areas), define the second row inside another set of apostrophes:
Example
Let "myHeader" span two columns and two rows:
.container {
display: grid;
grid-template-areas:
'myHeader
myHeader
. . .'
'myHeader myHeader . . .';
}
.item1 {
grid-area:
myHeader;
}
Result:
Make a ready-to-use Webpage Template
Here, we will name all grid items to make a ready-to-use webpage template:
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; }
.container {
display: grid;
grid-template-areas:
'header header header header header header'
'menu main
main main main right'
'menu footer footer footer footer
footer';
}
Result:
