Строки, колонки и ячейки

В CSS Grid контейнер делится на треки — строки (rows) и колонки (columns), а на их пересечениях образуются ячейки; элементы размещаются в ячейках или могут охватывать несколько ячеек сразу.

Зачем нужно

Понимание терминологии Grid — строки, колонки, ячейки, треки, линии — необходимо для правильного использования grid-template-columns, grid-column, grid-row и отладки раскладок. Без этого фундамента остальные Grid-свойства трудно осмыслить.

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

  • Любая Grid-раскладка
  • Размещение элементов на конкретных позициях
  • Объединение ячеек (span) для акцентов
  • Шаблоны страниц с grid-template-areas

Треки: колонки и строки

.grid {
  display: grid;

  /* Три колонки */
  grid-template-columns: 200px 1fr 200px;

  /* Две строки */
  grid-template-rows: 80px auto;

  gap: 16px;
}

Количество колонок задаётся явно; строки могут создаваться автоматически при добавлении элементов.

Линии Grid

Между треками и по краям сетки проходят линии — они нумеруются с 1 слева/сверху и с -1 справа/снизу:

Колонки: |1| track |2| track |3| track |4|
         или с конца: |-4|    |-3|    |-2|  |-1|

Ячейки и размещение элементов

/* Элемент в конкретной ячейке */
.header {
  grid-column: 1 / 4;  /* от линии 1 до линии 4 (все 3 колонки) */
  grid-row: 1 / 2;     /* первая строка */
}

/* Shorthand: start / end */
.sidebar {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

/* Охват через span */
.wide {
  grid-column: span 2; /* занять 2 колонки с текущей позиции */
}

/* До конца через -1 */
.full-width {
  grid-column: 1 / -1; /* на всю ширину */
}

grid-template-areas

Визуальное описание ячеек через имена:

.layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 60px 1fr 60px;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

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

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

Автоматическое размещение

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Элементы автоматически заполняют строки слева направо */
}

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

  1. Линии vs треки — grid-column: 1 / 3 означает от линии 1 до линии 3, то есть 2 колонки, а не 3.
  2. span без начальной позиции — grid-column: span 3 может неожиданно начинаться не с первой колонки при автоматическом размещении.
  3. grid-template-areas с дырами — точка . обозначает пустую ячейку: "header ." — шапка только в первой колонке.

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

Ресурсы