CSS Grid Areas
Grid Items taught line numbers and span. Named areas answer a friendlier question: can you draw the page as words — header, sidebar, main, footer — and let each child claim a label? grid-template-areas is the map; grid-area is the pin.
A grid areas toolkit
📊 Grid areas at a glance
| Property / token | Everyday job |
|---|---|
grid-template-areas |
On the container: quoted row strings that name each cell |
grid-area |
On an item: which named region that child occupies |
| Repeated name | Same name in adjacent cells = one spanning rectangle |
. (period) |
An empty cell with no name |
| Template tracks | Still set size with grid-template-columns / rows |
Each quoted string is one row of the map. Names inside a row are separated by spaces. Every row must list the same number of cells, or the template is invalid.
grid-template-areas — draw the map
Write the layout you mean in plain labels. A classic page shell often looks like four named roles across three rows.
.shell {
display: grid;
grid-template-columns: 14rem 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"aside main"
"footer footer";
gap: 1rem;
}
grid-area — pin each child
Each child picks one name from the map. Class names can stay BEM-style; the area token is what Grid reads.
.shell__header { grid-area: header; }
.shell__aside { grid-area: aside; }
.shell__main { grid-area: main; }
.shell__footer { grid-area: footer; }
Span by repeating a name
To stretch a region, write the same name in every cell that should belong to it. The region must stay a solid rectangle — no L-shapes.
.magazine {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas:
"hero hero hero"
"card1 card2 card3";
gap: 0.75rem;
}
.magazine__hero { grid-area: hero; }
Empty cells with a period
A lone . marks a hole. Useful when a card board should leave a gap without inventing a fake name.
.board {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"alpha ."
"beta gamma";
gap: 0.5rem;
}
.board__a { grid-area: alpha; }
.board__b { grid-area: beta; }
.board__c { grid-area: gamma; }
A calm named-areas habit
Sketch the map in grid-template-areas, size tracks with columns/rows, then pin children with grid-area. Keep names short and rectangular. Fall back to grid-column / grid-row when a one-off placement is clearer than rewriting the whole map. Responsive rewrites of the map wait for Grid Responsive.
.page {
display: grid;
grid-template-columns: minmax(12rem, 16rem) 1fr;
grid-template-areas:
"nav content"
"nav content";
gap: 1.25rem;
}
.page__nav { grid-area: nav; }
.page__content { grid-area: content; }
Try it yourself
- Draw a header / aside+main / footer map with
grid-template-areas. - Assign four children with matching
grid-areavalues. - Build a three-column hero that repeats
heroacross the first row. - Leave one empty cell with
.in a two-by-two board. - Keep track sizes on the container; note map swaps for the responsive Grid lesson next.
Common mistakes
- Naming an L-shaped or disconnected region (areas must be rectangles)
- Mismatched cell counts between quoted rows
- Putting
grid-template-areason a child instead of the container - Treating area names as CSS class selectors — they are template tokens
- Dropping
grid-template-columns/rowsand hoping names alone set sizes
Summary
- Named areas turn a layout into a readable cell map
grid-template-areaslives on the container;grid-areaon each item- Repeat a name to span; use
.for empty cells - Keep regions rectangular and pair names with track sizing
- Line placement still works; responsive map changes come next
🧠 Test Your Knowledge
Test Your Knowledge
Challenge yourself with this interactive quiz and see how well you understand the topic
📝 Instructions
- Read each question carefully
- Select the best answer for each question
- You can retake the quiz as many times as you want
- Your progress will be shown at the top