Явная и неявная сетка

Явная сетка (explicit grid) — треки, заданные через grid-template-columns / grid-template-rows; неявная сетка (implicit grid) — треки, которые Grid создаёт автоматически когда элементов больше, чем ячеек в явной сетке.

Зачем нужно

При добавлении элементов в Grid они могут автоматически попасть в неявные строки с неожиданными размерами. Понимание разницы между явной и неявной сеткой объясняет это поведение и позволяет управлять им через grid-auto-rows и grid-auto-flow.

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

  • Динамические списки карточек с неизвестным количеством элементов
  • Галереи изображений с автоматическим заполнением
  • Адаптивные сетки с auto-fill / auto-fit
  • Управление высотой автоматических строк

Явная сетка

.grid {
  display: grid;
  /* Явно задаём 3 колонки и 2 строки */
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 200px 200px;
  gap: 16px;
}
/* При 6 элементах — всё помещается в явную сетку */
/* При 7 элементах — 7-й уйдёт в неявную строку */

Неявная сетка

/* Если элементов больше, чем ячеек в явной сетке — */
/* Grid автоматически добавляет строки */

/* По умолчанию неявные строки имеют высоту auto (по контенту) */
/* Управляем их высотой: */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Нет grid-template-rows — строки неявные */
  grid-auto-rows: 200px; /* все неявные строки = 200px */
}

grid-auto-rows и grid-auto-columns

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  
  grid-auto-rows: minmax(150px, auto);
  /* Неявные строки: минимум 150px, растягиваются по контенту */
}

grid-auto-flow

Управляет направлением автоматического размещения:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  grid-auto-flow: row;    /* по умолчанию: заполнять строками */
  grid-auto-flow: column; /* заполнять колонками */
  grid-auto-flow: row dense; /* плотная упаковка — заполнять пробелы */
}

Пример: карточки с неизвестным количеством

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  grid-auto-rows: minmax(200px, auto);
  gap: 20px;
}

<div class="cards">
  <!-- Сколько угодно карточек — сетка справится -->
  <div class="card">Карточка 1</div>
  <div class="card">Карточка 2</div>
  <!-- ... -->
</div>

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

  1. Неожиданно маленькие неявные строки — без grid-auto-rows высота определяется содержимым и может нарушить визуальное единообразие карточек.
  2. dense и порядок в DOM — grid-auto-flow: dense может переставлять элементы визуально, нарушая порядок для Tab-навигации.
  3. grid-template-rows без достаточного количества треков — явная сетка заканчивается, и лишние элементы уходят в неявную с другими размерами.

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

Ресурсы