HTML/CSSIntermediate#css#grid

What are grid-template-areas used for?

They let you name grid regions and visually map out a layout as an ASCII-like grid, then assign elements to named areas via grid-area, making complex layouts far more readable than raw line numbers.

Example

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

What are grid-template-areas used for?

Related Questions

What are CSS media queries and how do you write a mobile-first stylesheet?

What is the difference between responsive and adaptive design?

What are the different CSS units (px, em, rem, %, vw, vh) and when to use them?