Grid Template Areas

CSS Grid's grid-template-areas property lets you define your layout using named regions instead of line numbers. Each string represents a row, and each name within that string represents a column cell. This creates a visual map of your layout right in the CSS.

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

Rules for grid-template-areas:

• Each row is a single string, and all rows must have the same number of columns.
• Area names must form rectangular regions. L-shapes or other non-rectangular shapes are invalid.
• Use a dot (.) to represent an empty cell.
• Repeat a name across adjacent cells to make that area span multiple columns or rows.

This approach is arguably the most readable way to define layouts in CSS.

One of the most powerful aspects of named grid areas is how easy they make responsive design. You can completely rearrange the layout by simply redefining the grid-template-areas in a media query without changing any HTML.

/* Mobile: single column */
.page {
  display: grid;
  grid-template-areas:
    "header"
    "main"
    "sidebar"
    "footer";
  grid-template-columns: 1fr;
}

/* Desktop: two columns */
@media (min-width: 768px) {
  .page {
    grid-template-areas:
      "header  header"
      "sidebar main"
      "footer  footer";
    grid-template-columns: 250px 1fr;
  }
}

Notice how the sidebar moves from below the main content on mobile to beside it on desktop. The HTML order stays the same, but the visual layout changes entirely. This separation of content order from visual order is a core strength of CSS Grid.

You can also use dots (.) for empty cells:

grid-template-areas:
  ". header ."
  ". main   ."
  ". footer .";