Grid Template Areas Explained

What grid-template-areas Does

grid-template-areas lets a layout be described visually, using named regions arranged as text, instead of only working out row and column numbers by hand. Each named area is then assigned to elements with grid-area.

Defining a Page Layout

.page {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

.site-header { grid-area: header; }
.sidebar     { grid-area: sidebar; }
.main        { grid-area: main; }
.site-footer { grid-area: footer; }

The quoted strings visually mirror the actual page layout - repeating header across both columns makes it span the full width, exactly as it would look on screen.

Why This Reads More Clearly Than Line Numbers

An alternative way to place items uses raw row/column line numbers (like grid-column: 1 / 3), which works but is harder to picture mentally. Named template areas let anyone reading the CSS immediately see the shape of the page just from the string layout.

Rearranging the Layout at a Breakpoint

@media (max-width: 700px) {
  .page {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
  }
}

Because the areas are just named regions, a completely different layout for smaller screens can be defined by rewriting the area map, without touching the HTML or the individual element rules at all.