You have already encountered the
grid-area property. This is the property that can take as a value all four of the lines used to position a grid area.
grid-area: 1 / 1 / 4 / 2;
What we are doing here when defining all four lines, is defining the area by specifying the lines that enclose that area.
We can also define an area by giving it a name and then specify the location of that area in the value of the
grid-template-areas property. You can choose what you would like to name your area. For example, if I wish to create the layout shown below I can identify four main areas.
- a header
- a footer
- a sidebar
- the main content
grid-area property I can assign each of these areas a name. This will not yet create any layout, but we now have named areas to use in a layout.
Having defined these names I then create my layout. This time, instead of placing my items using line numbers specified on the items themselves, I create the whole layout on the grid container.
grid-template-columns: repeat(9, 1fr);
grid-auto-rows: minmax(100px, auto);
"hd hd hd hd hd hd hd hd hd"
"sd sd sd main main main main main main"
"ft ft ft ft ft ft ft ft ft";
Using this method we do not need to specify anything at all on the individual grid items, everything happens on our grid container. We can see the layout described as the value of the