grid-template-areas
property
CSS3
Defines named grid areas. Items are placed by referencing area names with grid-area.
Syntax
grid-template-areas: "header header" "sidebar main";
Example
css
.page {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 250px 1fr;
grid-template-rows: 60px 1fr 60px;
min-height: 100vh;
}
header { grid-area: header; }
aside { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }