grid-auto-rows и grid-auto-columns

grid-auto-rows и grid-auto-columns задают размер неявных треков Grid — строк или колонок, которые браузер создаёт автоматически, когда элементы выходят за пределы явно определённой сетки.

Зачем нужно

Явная сетка задаётся через grid-template-rows/grid-template-columns. Но если элементов больше, чем объявленных треков, браузер создаёт дополнительные (неявные) треки с нулевой высотой по умолчанию. grid-auto-rows позволяет задать высоту этих дополнительных строк — например, фиксированную или через minmax.

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

  • Карточные сетки с переменным числом элементов
  • Список, где строки должны иметь минимальную высоту
  • Горизонтальный автопоток с grid-auto-columns

grid-auto-rows

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px; /* все неявные строки — 200px */
}

/* minmax — строки минимум 100px, максимум по контенту */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div> <!-- новая строка создаётся автоматически -->
  <div>5</div>
</div>

grid-auto-columns

/* Горизонтальный скролл */
.scroll {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 200px; /* каждая неявная колонка — 200px */
  overflow-x: auto;
  gap: 12px;
}

<div class="scroll">
  <div>Карточка 1</div>
  <div>Карточка 2</div>
  <div>Карточка 3</div>
</div>

Несколько значений

Можно задать паттерн чередующихся размеров:

.alternating {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px 200px;
  /* Нечётные неявные строки — 100px, чётные — 200px */
}

Явные vs неявные треки

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* явные — 3 колонки */
  grid-template-rows: 100px 100px;        /* явные — 2 строки */
  grid-auto-rows: 80px;                   /* неявные строки (3-я, 4-я...) */
}

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

  1. grid-template-rows вместо grid-auto-rows — если число строк фиксировано — используйте grid-template-rows; для динамического числа — grid-auto-rows
  2. grid-auto-rows: 0 (по умолчанию) — без явного задания неявные строки имеют нулевую высоту, контент "схлопывается"
  3. grid-auto-columns без grid-auto-flow: column — при стандартном row flow дополнительные колонки не создаются

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

Ресурсы