CSS Grid Template Areas Explained

CSS Grid's grid-template-areas property lets you lay out a page by naming regions instead of counting rows and columns. You sketch your layout as a grid of named cells directly in your CSS, and then tell each HTML element which named area it belongs to. The result reads almost like a visual diagram of the page.

This is one of the most beginner-friendly parts of CSS Grid — instead of mentally tracking numbered grid lines, you give each section of your page a plain-English name like header, sidebar, or footer.

Defining Named Areas

You declare the layout shape with grid-template-areas, where each quoted string is one row and each word in it is a column. Then every child element is assigned to one of those names with grid-area.

<div class="page">
  <header class="site-header">Header</header>
  <nav class="site-nav">Sidebar</nav>
  <main class="site-main">Main Content</main>
  <footer class="site-footer">Footer</footer>
</div>

.page {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "nav    main"
    "footer footer";
  min-height: 100vh;
  gap: 1rem;
}

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

This renders a classic page layout: a full-width header on top, a 200px sidebar next to a flexible main content area in the middle, and a full-width footer at the bottom — and the CSS literally looks like a map of that layout.

Why This Beats Manual Line Placement

Before grid-template-areas, placing items required counting grid lines with properties like grid-column: 2 / 3, which gets hard to read once a layout has more than a few regions. Named areas are self-documenting — anyone reading the CSS can immediately picture the page structure from the quoted strings alone, without cross-referencing line numbers.

Reflowing the Layout at a Breakpoint

Because the shape of the grid lives in one property, redefining the layout for a smaller screen is simple — just write a new grid-template-areas value inside a media query.

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

On a narrow screen, the sidebar drops below the main content and everything stacks into a single column — no need to touch the HTML or renumber any grid lines, since each element still just references its named area. Pair this with the general approach in CSS media queries for a complete responsive strategy.

One rule to remember: every row string must have the same number of column names, and a cell left empty uses a period (.) as a placeholder if you want to skip assigning an area there.

---