Grid areas
Grid areas are a feature of CSS Grid Layout that allow you to group together multiple cells of a grid and assign them a name. To define a grid area, you can use the grid-template-areas property, which allows you to create named grid areas by grouping together cells of the grid using quotation marks.
.parent {
display: grid;
grid-template-areas:
". logo ."
"header header header"
"main main sidebar-top"
"main main sidebar-bottom"
"aside aside sidebar-bottom"
"footer footer footer";
}
.grid-logo {
grid-area: logo;
}
See the Pen flex-box by majadc (@majadc) on CodePen.