CSS Grid Template Areas Guide

What Are Grid Template Areas?

Grid template areas let you name sections of your layout and then arrange them visually using ASCII-art-like syntax in CSS. Instead of tracking column and line numbers, you describe your layout with words — making the code immediately readable and easy to rearrange.

This feature is the most expressive part of CSS Grid, turning layout definition from an exercise in coordinate math into something closer to sketching a wireframe.

Basic Syntax

Define named areas in grid-template-areas, then assign elements to those names with grid-area:

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

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

Each quoted string in grid-template-areas represents one row. The names inside each string map cells to their assigned area. The visual alignment of names mirrors the actual layout — you can see sidebar sitting on the left spanning all three rows.

Rules for Named Areas

• Every cell in the grid must be filled — use a period (.) for empty cells.
• An area name must form a single contiguous rectangle. You cannot create L-shaped or disconnected areas.
• An area can span multiple rows and columns by repeating the name.

grid-template-areas:
  "header  header  header"
  "sidebar main    aside"
  "sidebar footer  footer";

Here, header spans three columns, sidebar spans two rows, and footer spans two columns — all from readable names rather than line numbers.

Common Layout Patterns

Classic Holy Grail

.holy-grail {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header  header"
    "nav    content aside"
    "footer footer  footer";
  min-height: 100vh;
}

Dashboard Layout

.dashboard {
  display: grid;
  grid-template-columns: 240px 1fr 1fr;
  grid-template-rows: 60px 1fr 1fr;
  grid-template-areas:
    "nav    nav    nav"
    "sidebar chart chart"
    "sidebar table stats";
  gap: 16px;
}

Dashboard layouts benefit from named areas because the sections have clear semantic roles — sidebar, chart, stats — that make the grid definition self-documenting.

Card Layout With Gutter

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "card1 card2 card3"
    "card4 card5 card6";
  gap: 24px;
}

For repeating identical cards, use auto-placement instead of named areas — named areas shine when sections have distinct roles.

Responsive Reordering

Named areas make responsive reordering simple. Change the template areas in a media query without touching any HTML:

/* Mobile: stacked layout */
@media (max-width: 768px) {
  .layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
  }
}

The sidebar drops below the main content on narrow screens — no order property, no flex wrapping, no duplicated markup.

Areas vs Line Numbers

Use named areas for page shells with distinct sections. Use line numbers for fine-grained placement, overlapping elements, or grids with many identical items.

Common Mistakes

• Misspelling a name — if the name in grid-template-areas does not match any grid-area assignment, the cell is ignored and the layout breaks silently.
• Non-rectangular areas — using the same name in a non-contiguous shape causes the declaration to be invalid and the entire grid-template-areas rule is dropped.
• Mismatched row lengths — each row string must have the same number of cells. An extra or missing name invalidates the whole property.

Key Takeaways

• Grid template areas use readable names to define layout, replacing line-number math with visual ASCII syntax.
• Each area must form a single contiguous rectangle — periods mark empty cells.
• Reordering for responsive design is as simple as rewriting the template in a media query.
• Named areas are best for page-level layouts with distinct sections; line numbers suit complex or overlapping grids.
• Mismatched row lengths, typos, and non-rectangular shapes silently break the entire declaration.
• Combine grid-template-areas with grid-template-columns and grid-template-rows for full control.

Try It Yourself

Visualize and experiment with grid template areas interactively using the CSS Grid Generator.