grid-template-areas: именованные области

grid-template-areas позволяет задать визуальную карту сетки с именованными областями в виде ASCII-схемы прямо в CSS, после чего элементы размещаются через grid-area: имя.

Зачем нужно

grid-template-areas делает код Grid самодокументированным. По CSS-декларации можно мгновенно понять структуру страницы. Это особенно ценно при адаптивных лейаутах: нужно лишь переопределить grid-template-areas в медиазапросе, и все элементы перестроятся автоматически.

Где используется

  • Страничные раскладки (хедер, сайдбар, контент, футер)
  • Адаптивные компоненты, меняющие структуру на мобильном
  • Dashboard-панели с именованными регионами

Синтаксис

.container {
  display: grid;
  grid-template-areas:
    "area1  area2  area2"   /* строка 1: 3 ячейки */
    "area3  area2  area2"   /* строка 2 */
    "area4  area4  area4";  /* строка 3: все ячейки = area4 */
}
  • Каждая строка в кавычках = одна строка сетки
  • Одно имя = одна ячейка
  • Повторяющееся имя = объединённые ячейки (область должна быть прямоугольной)
  • . = пустая ячейка

Пример: классический страничный лейаут

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

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

<div class="page">
  <header class="header">Шапка</header>
  <aside class="sidebar">Навигация</aside>
  <main class="content">Основной контент</main>
  <footer class="footer">Подвал</footer>
</div>

Пустые ячейки через точку

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "a  a  b"
    ".  c  b"   /* первая ячейка пустая */
    "d  d  d";
}

Адаптивное переключение

/* Мобильный: одна колонка */
.page {
  display: grid;
  grid-template-areas:
    "header"
    "content"
    "sidebar"
    "footer";
}

/* Десктоп: две колонки */
@media (min-width: 960px) {
  .page {
    grid-template-columns: 260px 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "header  header"
      "sidebar content"
      "footer  footer";
  }
}

Правила именования областей

  • Только буквы, цифры, дефис, нижнее подчёркивание
  • Область должна быть прямоугольной (Г-образные формы — ошибка)
  • Имена в grid-area должны точно совпадать с именами в grid-template-areas

Частые ошибки

  1. Непрямоугольные области — браузер игнорирует grid-template-areas целиком, если хотя бы одна область Г-образная; ошибка в DevTools
  2. Разное число ячеек в строках — каждая строка должна содержать одинаковое количество имён/точек
  3. grid-area без совпадающего имени — элемент попадёт в автопоток вместо нужной области

Связанные темы

Ресурсы