CSS Grid Areas
Named grid areas make layout code much more readable. You draw the layout as an ASCII art template.
How It Works
- Name items with
grid-area - Define the layout with
grid-template-areas
Use a dot (.) for empty cells.
CSS
Beginner
1 min read
CSS Grid Areas
Example
.layout {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: 60px 1fr 50px;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
min-height: 100vh;
gap: 8px;
}
header { grid-area: header; }
.sidebar { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }