Именованные grid-линии

В CSS Grid линии между треками можно именовать прямо в grid-template-columns и grid-template-rows, что позволяет размещать элементы по имени линии вместо числового индекса.

Зачем нужно

Числовые индексы (grid-column: 2 / 4) хрупки: добавление колонки меняет все номера. Именованные линии дают семантику — grid-column: sidebar-start / sidebar-end читается как документация. Это упрощает поддержку сложных шаблонов страниц.

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

  • Шаблоны страниц с фиксированными зонами (header, sidebar, main, footer)
  • Многоколоночные раскладки, где добавляются/удаляются треки
  • Крупные Grid-системы с именованными колонками

Синтаксис именования

Имена указываются в квадратных скобках между размерами треков:

.grid {
  display: grid;
  grid-template-columns:
    [sidebar-start] 250px
    [sidebar-end main-start] 1fr
    [main-end];
  
  grid-template-rows:
    [header-start] 60px
    [header-end content-start] 1fr
    [content-end footer-start] 80px
    [footer-end];
}

Размещение элементов по имени

.header {
  grid-column: sidebar-start / main-end; /* от левого края до правого */
  grid-row: header-start / header-end;
}

.sidebar {
  grid-column: sidebar-start / sidebar-end;
  grid-row: content-start / content-end;
}

.main {
  grid-column: main-start / main-end;
  grid-row: content-start / content-end;
}

.footer {
  grid-column: sidebar-start / main-end;
  grid-row: footer-start / footer-end;
}

<div class="grid">
  <header class="header">Шапка</header>
  <nav class="sidebar">Навигация</nav>
  <main class="main">Контент</main>
  <footer class="footer">Подвал</footer>
</div>

Автоматические имена от grid-template-areas

При использовании grid-template-areas линии именуются автоматически:

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

/* CSS автоматически создаёт линии: */
/* header-start, header-end, sidebar-start, main-end, footer-start... */

.header { grid-area: header; }

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

  1. Линия между двумя треками имеет два имени — одна физическая линия может быть и sidebar-end, и main-start; записываются в одних скобках через пробел.
  2. Имена чувствительны к регистру — Sidebar-start и sidebar-start — разные имена.
  3. Путаница с grid-area и линиями — grid-area работает с именами зон (grid-template-areas), а не с именами линий.

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

Ресурсы