Grid Template Areas

Placing items by line numbers works, but it can get confusing fast. What if you could give your grid areas names instead? grid-template-areas lets you create a visual map of your layout right in CSS. It is like drawing your layout with words.

Defining Areas

You define areas by quoting names in a grid pattern. Each string is a row, and each name represents a cell. The same name appearing in multiple cells means those cells merge into one area.

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

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.aside   { grid-area: aside; }
.footer  { grid-area: footer; }
    

Look at how readable that is. You can literally see the layout in the CSS. The header spans all three columns, the footer spans all three columns, and the middle row has three separate sections.

The grid-area Property

Once you have named areas, you assign elements to them with the grid-area property. The value must match one of the names in your grid-template-areas declaration. This replaces the need to specify row and column lines.

.sidebar {
  grid-area: sidebar;
}
    

This is much more intuitive than remembering that the sidebar starts at column line 1, row line 2 and ends at column line 2, row line 3.

The Dot Keyword

Use a . (dot) to represent an empty cell. This is useful when you want gaps in your layout or when an area does not start at the beginning of a row.

grid-template-areas:
  ".     header  ."
  "sidebar content aside"
  ".     footer  .";
    

The dots create empty spaces on the sides. This pattern is common in centered layouts where you want content to stay within a max width while the background spans the full viewport.