Named Grid Areas

Give a layout a readable map, then assign each item to a named region.

A two-column page map

heading
sidebar
content
footer

The container declares grid-template-areas. Each child uses a matching name such as grid-area: sidebar.

Keep areas rectangular

Every repeated area name must form one complete rectangle. A dot can represent an intentionally empty cell.

Named areas affect presentation only. Write heading, primary content, complementary content, and footer information in a logical source order first.

Important HTML

Named areas label regions in the template.

<div class="layout">
  <header>…</header>
  <aside>…</aside>
  <main>…</main>
</div>

Important CSS

grid-template-areas assigns names; children use grid-area.

.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main";
}
.sidebar { grid-area: sidebar; }