Intermediate LevelCSS & Modern Layouts
How do CSS Grid named areas (grid-template-areas) create readable layouts?
❓ Interview Prompt: Explain grid-template-areas syntax, named area placement, and responsive area rearrangement.
grid-template-areas provides a visual ASCII-art representation of grid layouts:
Syntax:
Each string represents a row. Repeated names span multiple columns. A dot (.) creates an empty cell.
Benefits:
•
Extremely readable layout definitions.
•
Easy to rearrange layouts across breakpoints by redefining area strings.
•
Child elements reference area names via
grid-area: name.Code Implementation Example
css
.page {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr auto;
min-height: 100dvh;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
@media (max-width: 768px) {
.page {
grid-template-areas:
"header"
"main"
"footer";
grid-template-columns: 1fr;
}
}💡Named grid areas with responsive mobile reflow.
🎯 Interview Key Takeaway
grid-template-areas creates visually readable layouts that are easily rearranged across responsive breakpoints.
#Grid Areas#Layout#Responsive#Intermediate
Back to all CSS & Modern Layouts Questions→