Loading lesson path
Concept visual
Start at both ends
Formula
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
Formula
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.
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 {Formula
grid - area:myHeader;
}We can use a period sign (.) to refer to a grid item with no name:
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 {Formula
grid - area:myHeader;
}To define two rows (two areas), define the second row inside another set of apostrophes:
Let "myHeader" span two columns and two rows:.container {
display: grid;Formula
grid - template - areas:'myHeader myHeader. . .'
'myHeader myHeader . . .';
}.item1 {Formula
grid - area:myHeader;
}Formula
Here, we will name all grid items to make a ready - to - use webpage template: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;Formula
grid - template - areas:'header header header header header header' 'menu main main main main right'
'menu footer footer footer footer footer';
}