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
Formatted code
.container {
display: grid;
grid-template-areas: 'myHeader myHeader myHeader myHeader myHeader';
} .item1 {
grid-area: myHeader;
}Live preview
Expected output
1 2 3 4 5 6
We can use a period sign (.) to refer to a grid item with no name:
Example
Formatted code
.container {
display: grid;
grid-template-areas: 'myHeader myHeader myHeader . .';
} .item1 {
grid-area: myHeader;
}Live preview
Expected output
1 2 3 4 5 6
To define two rows (two areas), define the second row inside another set of apostrophes:
Example
Formatted code
.container {
display: grid;
grid-template-areas: 'myHeader myHeader . . .'
'myHeader myHeader . . .';
} .item1 {
grid-area: myHeader;
}Live preview
Expected output
1 2 3 4 5 6
Make a ready-to-use Webpage Template
Here, we will name all grid items to make a ready-to-use webpage template:
Example
Formatted code
.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';
}Live preview
Expected output
Header Menu Main Right Footer