You know Grid fundamentals. Now we unlock its real power: naming areas to describe a layout in plain words, placing items by line, packing them densely, and overlapping them for designs that were nearly impossible before Grid.
Named template areas
The most readable way to build a page layout is <code>grid-template-areas</code>: you literally draw the layout as a string map, then assign each child to a named area. It reads like ASCII art and is trivial to rearrange responsively.
<div class="page"><header>Header</header><nav>Nav</nav><main>Main</main><footer>Footer</footer></div>.page{display:grid;grid-template-columns:140px 1fr;grid-template-areas:'header header' 'nav main' 'footer footer';gap:8px}
header{grid-area:header;background:#1e293b;color:#fff;padding:12px;border-radius:6px}
nav{grid-area:nav;background:#334155;color:#fff;padding:12px;border-radius:6px}
main{grid-area:main;background:#e2e8f0;padding:12px;border-radius:6px}
footer{grid-area:footer;background:#1e293b;color:#fff;padding:12px;border-radius:6px}Line-based placement and spanning
You can place items precisely using grid lines: <code>grid-column: 1 / 3</code> spans from line 1 to line 3. <code>span N</code> is the relative form. This is how you make featured cards that stretch across a grid.
<div class="g"><div class="feat">Featured</div><div>A</div><div>B</div><div>C</div></div>.g{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.g div{background:#0d9488;color:#fff;padding:18px;border-radius:6px;text-align:center}
.feat{grid-column:1 / -1;background:#0f766e}Auto-flow and dense packing
<code>grid-auto-flow: dense</code> tells Grid to backfill gaps left by spanning items, producing a tight masonry-like pack. Combined with auto-placement, the browser arranges items for you.
Overlapping items
Because items can be placed on the same lines, they can overlap — assign two children to the same area and use <code>z-index</code> to layer them. This enables hero sections with text over images, all in pure Grid.
.caption { position: absolute; bottom: 0; }.img, .caption { grid-area: 1 / 1; } /* same cell, layered */Reaching for absolute positioning to overlap elements when Grid placement does it cleanly and stays responsive.
Use grid-template-areas for page-level layouts — it is self-documenting and you can redraw it inside a media query to rearrange the whole page in a few lines.
Build a holy-grail page layout (header, nav, main, footer) with grid-template-areas, then add a featured card that spans all columns with grid-column: 1 / -1.
1. What lets you draw a layout as a string map?
2. What does grid-column: 1 / -1 do?
3. What backfills gaps from spanning items?
- grid-template-areas draws layouts as readable string maps.
- Place items by line (1 / -1) or span; rearrange in media queries.
- grid-auto-flow: dense backfills gaps for tight packing.
- Grid can overlap items cleanly — no absolute positioning needed.