Grid Template Areas
Name areas of the grid with grid-template-areas for readable, semantic layouts.
Named Grid Areas
grid-template-areas lets you name regions of the grid using ASCII art. It makes layouts highly readable and maintainable.
Defining Template Areas
Each quoted string represents a row. Cells with the same name form a rectangular area. Use . for empty cells.
.page {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}