Grid Template Areas
Named grid areas allow developers to describe a layout semantically. This is particularly useful for application shells containing headers, navigation, main content, and sidebars.
Named areas can be rearranged inside media queries without changing the HTML order.
Named Grid Areas
Application Shell
.app {
display: grid;
grid-template-columns: 240px 1fr;
grid-template-areas:
"sidebar header"
"sidebar main";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }💡 The layout becomes readable directly from the CSS declaration.
Key Takeaways
- Named areas improve readability for complex layouts.
- Grid areas can be rearranged responsively.
Knowledge Check
Which property assigns an element to a named grid area?