Defining Grid Areas
We can create named areas on the grid to put content into. To do this we first assign elements in our markup to a Grid Area, using the grid-area
property.
We can then use the grid-template-areas
property to describe where on the Grid these elements should sit.
Repeating the name of an area indicates that the area spans that grid track. Using a .
or a sequence like ....
indicates an empty track. Such as the very first cell on this grid.
Credit to gridbyexample.com for inspiring this example.
[fl_row] { display:grid; grid-gap: 10px; grid-template-columns: 1fr 1fr 1fr; grid-template-areas: "....... header header" "sidebar content content"; } [fl_row] .header { grid-area: header; } [fl_row] .sidebar { grid-area: sidebar; } [fl_row] .content { grid-area: content; }