CSS Grid Template Areas

Design named grid layouts visually using grid-template-areas and grid-area for readable, maintainable page structures.

Overview

CSS Grid template areas let you define your layout as a visual ASCII map directly in your CSS. Instead of tracking column/row numbers, you name each region and assign elements to regions by name. ```css .layout { grid-template-areas: "header header" "sidebar main" "footer footer"; } ``` Each quoted string is one row. Each word is one cell. Repeating the same name spans that area across multiple cells. Then each child claims its area: ```css header { grid-area: header; } aside { grid-area: sidebar; } main { grid-area: main; } footer { grid-area: footer; } ``` This approach makes your layout self-documenting and easy to change rearrange the ASCII map, and the layout updates instantly.

Key Points

•grid-template-areas defines a named map of the grid layout using quoted row strings
•Each word in the string is a named cell; repeat names to span that area
•Use "." (dot) for empty cells in the grid
•grid-area assigns a child element to a named area
•grid-template-areas must form rectangular shapes L-shapes are invalid
•Combine with grid-template-columns and grid-template-rows for full control
•Responsive layouts: redefine grid-template-areas in media queries

Examples

Classic page layout with template areas

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

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

The text map makes the layout instantly readable no column/row numbers to track.

Responsive: switch to single column on mobile

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

@media (min-width: 768px) {
  .layout {
    grid-template-columns: 200px 1fr;
    grid-template-areas:
      "header  header"
      "sidebar main"
      "footer  footer";
  }
}

On mobile, sidebar appears below main. On desktop, it moves to the left a single property swap.

Magazine grid with asymmetric areas

.magazine {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 300px 200px;
  gap: 16px;
  grid-template-areas:
    "hero  hero  aside"
    "card1 card2 aside";
}

.hero  { grid-area: hero; }
.aside { grid-area: aside; }
.card1 { grid-area: card1; }
.card2 { grid-area: card2; }

Common Mistakes

Creating non-rectangular area shapes grid-template-areas only accepts rectangles; an L-shape is invalid
Mismatching row lengths every row string must have the same number of cells
Forgetting to define grid-template-columns areas alone do not set column sizes

Note

Name your areas after their role (header, sidebar, main, footer), not their appearance (left-panel, top-bar). This makes it much easier to reorganize the layout without renaming variables.

CSS Grid Template Areas

Overview

Key Points

Examples

Common Mistakes

Note

Exercises

Knowledge Check

How do you make a grid area span two columns in grid-template-areas?