What is grid-template-areas and how do you use it?

grid-template-areas lets you name regions of the grid and draw the layout as a little ASCII picture, then assign each element to a named region.

Instead of juggling line numbers, you give blocks of cells names and arrange those names visually in the CSS. Each quoted string is one row; repeating a name makes that area span multiple cells.

.container {
  display: grid;
  grid-template-rows: 200px 1fr 100px;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-areas:
    "header  header  header  header"
    "content content content sidebar"
    "footer  footer  footer  footer";
}

/* Drop each element into its named area: */
header  { grid-area: header; }
article { grid-area: content; }
aside   { grid-area: sidebar; }
footer  { grid-area: footer; }

Why people love it:

• The CSS itself looks like a wireframe of the page — you can see the layout.
• Rearranging the whole layout is as easy as editing the text picture.
• It's far more readable and maintainable than a wall of line numbers.

Go deeper:

• MDN — Grid template areas — naming regions, empty . cells, and re-flowing the whole layout by editing the ASCII picture.