How do grid-template-areas and responsive grids work?

Question

Accepted Answer

`grid-template-areas` lets you lay out a grid **visually** by naming regions, making complex page layouts readable and easy to rearrange responsively.

## Defining named areas

```css
.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"   /* row 1: header spans both columns */
    "sidebar main"     /* row 2: sidebar | main */
    "footer  footer";  /* row 3: footer spans both */
  min-height: 100vh;
}

.header  { grid-area: header; }   /* assign each element to a named area */
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }
```

The ASCII-art `grid-template-areas` *is* the layout — you can see the structure at a glance, and repeating a name makes a region span cells.

## Rearranging for mobile — just redraw the map

```css
@media (max-width: 600px) {
  .layout {
    grid-template-columns: 1fr;        /* single column */
    grid-template-areas:
      "header"
      "main"      /* main now ABOVE sidebar on mobile */
      "sidebar"
      "footer";
  }
}
```

To change the entire layout for mobile, you just rewrite the area map — the HTML and the `grid-area` assignments stay identical. This is far cleaner than repositioning each element individually.

## Why this is powerful

- **Self-documenting** — the CSS visually mirrors the rendered layout.
- **Decoupled from source order** — elements can be placed anywhere regardless of HTML order (good for putting `main` first in the DOM for accessibility, yet displaying the sidebar first visually).
- **Easy responsive reflow** — swap the area template per breakpoint.

## Why it matters

Named grid areas make page-level layouts (header/sidebar/main/footer) both readable and trivially responsive — restructuring is a matter of editing an ASCII map, not rewiring positions.

It's one of the clearest, most maintainable layout techniques CSS offers.