Grid Placement & Areas

Spanning columns and rows

On a grid item, grid-column: span 2 makes it span two columns; grid-row: span 2 spans two rows.

<style>
  .g { display:grid; grid-template-columns: repeat(4, 1fr); gap:8px; }
  .g > div { background:#4338ca; color:#fff; padding:18px; border-radius:8px; text-align:center; }
  .wide { grid-column: span 2; background:#06b6d4; }
  .tall { grid-row: span 2; background:#f59e0b; }
</style>
<div class="g">
  <div class="wide">span 2 cols</div>
  <div class="tall">span 2 rows</div>
  <div>3</div><div>4</div><div>5</div><div>6</div><div>7</div>
</div>

The grid has four equal columns (repeat(4, 1fr)). Most items fill one cell, but two break the pattern: .wide has grid-column: span 2, so it stretches across two columns, and .tall has grid-row: span 2, so it stretches down two rows. The remaining items automatically flow into the empty cells around them. This is how you make a “featured” tile that is bigger than the rest of a gallery.

Named areas — a whole page in one place

grid-template-areas lets you draw your layout as a text map — incredibly readable for full page layouts (header, sidebar, main, footer).

<style>
  .page {
    display: grid; gap: 8px; height: 220px;
    grid-template-columns: 120px 1fr;
    grid-template-areas: "head head" "side main" "foot foot";
  }
  .page > div { padding:10px; border-radius:8px; color:#fff; }
  .h { grid-area: head; background:#4338ca; }
  .s { grid-area: side; background:#8b5cf6; }
  .m { grid-area: main; background:#06b6d4; }
  .f { grid-area: foot; background:#1f2333; }
</style>
<div class="page">
  <div class="h">header</div><div class="s">sidebar</div>
  <div class="m">main</div><div class="f">footer</div>
</div>

This is the clearest way to build a page layout, because you literally draw it as text. The grid-template-areas lines are a map:

• "head head" — the top row is one area named head spanning both columns.
• "side main" — the middle row splits into a narrow side and a wide main (matching the 120px 1fr columns).
• "foot foot" — the bottom row is one foot area spanning both columns.

Each child then claims its spot with grid-area: head, grid-area: side, and so on. The name in the child must match a name in the map. Want the sidebar on the right instead? Just rewrite the text map — no other changes needed.