grid-auto-flow: направление заполнения

grid-auto-flow управляет алгоритмом авторазмещения Grid: в каком направлении браузер расставляет элементы без явно заданных координат — по строкам, по колонкам или плотной упаковкой.

Зачем нужно

Когда вы не задаёте grid-column/grid-row для каждого элемента, браузер сам решает, куда их поставить. grid-auto-flow контролирует этот алгоритм. Например, значение dense устраняет "дыры" в сетке, когда крупные элементы занимают несколько ячеек.

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

  • Галереи с элементами разного размера и dense-упаковкой
  • Горизонтальный скролл-список: column автопоток
  • Pinterest-like masonry через dense

Значения

.container {
  display: grid;
  grid-auto-flow: row;         /* по умолчанию — строка за строкой */
  grid-auto-flow: column;      /* колонка за колонкой */
  grid-auto-flow: row dense;   /* строки + заполнять дыры */
  grid-auto-flow: column dense;/* колонки + заполнять дыры */
}

Примеры

row (по умолчанию) — слева направо, затем вниз

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row;
  gap: 8px;
}
/* Элементы: 1 2 3 / 4 5 6 / 7 8 9 */

column — сверху вниз, затем вправо

.sidebar-grid {
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  gap: 8px;
}
/* Элементы: 1 4 7 / 2 5 8 / 3 6 9 */

dense — устранение дыр

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: row dense;
  gap: 16px;
}
.item--wide {
  grid-column: span 2; /* занимает 2 колонки */
}
.item--tall {
  grid-row: span 2;    /* занимает 2 строки */
}

<div class="gallery">
  <div class="item--wide">Широкий</div>
  <div>Обычный</div>
  <div class="item--tall">Высокий</div>
  <div>Обычный</div>
  <div>Обычный</div>
  <!-- dense заполнит дыры меньшими элементами -->
</div>

Горизонтальный автопоток

.horizontal-scroll {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 200px;
  overflow-x: auto;
  gap: 12px;
}

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

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

  1. dense меняет визуальный порядок — элементы могут отображаться не в DOM-порядке, что ухудшает доступность (screen readers читают по DOM)
  2. grid-auto-flow: column без grid-auto-columns — колонки получают размер по контенту; задайте grid-auto-columns для предсказуемого результата
  3. Ожидание dense от перегруппировки крупных элементов — dense только заполняет дыры, а не переставляет крупные элементы

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

Ресурсы