Как работают grid-template-areas и отзывчивые сетки?

Question

Accepted Answer

`grid-template-areas` позволяет разметить сетку **визуально**, называя области, что делает сложные макеты страниц читаемыми и легко перестраиваемыми для разных устройств.

## Определение именованных областей

```css
.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"   /* row 1: header spans both columns */
    "sidebar main"     /* row 2: sidebar | main */
    "footer  footer";  /* row 3: footer spans both */
  min-height: 100vh;
}

.header  { grid-area: header; }   /* assign each element to a named area */
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }
```

ASCII-art в `grid-template-areas` *является* макетом — вы можете увидеть структуру с первого взгляда, а повторение имени делает область охватывающей несколько ячеек.

## Перестройка для мобильных устройств — просто переорганизуйте карту

```css
@media (max-width: 600px) {
  .layout {
    grid-template-columns: 1fr;        /* single column */
    grid-template-areas:
      "header"
      "main"      /* main now ABOVE sidebar on mobile */
      "sidebar"
      "footer";
  }
}
```

Чтобы изменить весь макет для мобильных устройств, вы просто переписываете карту областей — HTML и назначения `grid-area` остаются идентичными. Это намного чище, чем переустановка позиций каждого элемента отдельно.

## Почему это мощно

- **Самодокументирующийся** — CSS визуально отражает отрисованный макет.
- **Независимый от порядка источника** — элементы можно размещать в любом месте независимо от порядка в HTML (полезно для размещения `main` в начале DOM для доступности, но визуального отображения боковой панели первой).
- **Легкая отзывчивая перестройка** — замените шаблон области для каждой точки останова.

## Почему это важно

Именованные области сетки делают макеты уровня страницы (заголовок/боковая панель/основное содержимое/футер) одновременно читаемыми и легко отзывчивыми — перестройка — это просто редактирование ASCII-карты, а не переустановка позиций.

Это одна из самых ясных и простых в обслуживании методик верстки, которые предлагает CSS.