Как работают grid-template-areas?

`grid-template-areas` описывает раскладку именованными областями, а элементы привязываются к ним через grid-area.

Пример

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

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

Разметка схемы в коде похожа на рисунок страницы, поэтому раскладку легко читать.

Правила

• Каждая строка схемы содержит одинаковое число ячеек.
• Одно имя должно образовывать прямоугольник.
• Точка . обозначает пустую ячейку.

Адаптивность

На узком экране схему переопределяют одним правилом:

@media (max-width: 700px) {
  .page {
    grid-template-columns: 1fr;
    grid-template-areas: "header" "content" "sidebar" "footer";
  }
}

Коротко для собеседования

Схема из строк с именами позволяет собрать раскладку и поменять её в media query без правки разметки.