grid-template-areas

grid-template-areas draws a named map of an explicit grid. Each quoted string represents a row; space-separated tokens represent cells. Items opt into a name with grid-area.

A title across two columns

The repeated title token forms one rectangular area spanning both columns. The note and content names each occupy one cell.

<section class="layout">
  <h2 class="title">A named layout</h2>
  <p class="note">Short note</p>
  <p class="content">Main explanation</p>
</section>

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  grid-template-areas: "title title" "note content";
  gap: 0.5rem;
}
.title {
  grid-area: title;
}
.note {
  grid-area: note;
}
.content {
  grid-area: content;
}
.layout > * {
  padding: 0.75rem;
  background: #dbeafe;
  overflow-wrap: anywhere;
}

Stack the same content on narrow screens

The source stays heading, explanation, then supplementary note. The wide layout places the note alongside the explanation; the narrow layout follows the source order.

<section class="layout">
  <h2 class="title">Workshop</h2>
  <p class="content">Practice with a complete example.</p>
  <aside class="note">Bring a notebook.</aside>
</section>

.layout {
  display: grid;
  grid-template-areas: "title" "content" "note";
  gap: 0.5rem;
}
.title {
  grid-area: title;
}
.content {
  grid-area: content;
}
.note {
  grid-area: note;
}
@media (min-width: 500px) {
  .layout {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    grid-template-areas: "title title" "content note";
  }
}
.layout > * {
  padding: 0.75rem;
  background: #dbeafe;
  overflow-wrap: anywhere;
}

Valid maps and defaults

The initial value is none and the property is not inherited. Every row string must have the same number of cell tokens. Each repeated name must form a single filled rectangle; an L-shaped or disconnected named area invalidates the declaration. A period, or a sequence of periods, marks an unnamed cell.

Names do not create HTML semantics or accessible landmarks. Use appropriate elements independently. The area map establishes cells, while column sizes and row sizes define their dimensions.

Troubleshooting

Check both the quoted map and each item’s grid-area spelling. A later grid or grid-template shorthand can erase the map. Visual placement does not change reading or focus order: write a sensible document first, then use placement to adapt it.

Learn grid-area for item assignment and responsive layouts for choosing breakpoints from content.

Sources and browser support

MDN: grid-template-areas describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.

CSS Grid specification defines track sizing, shorthand resets, and placement.