Справочник HTML & CSS

grid-auto-flow

Как сетка размещает элементы без явно заданного места.

Синтаксис

grid-auto-flow: value;

Значения

Параметр	Тип	Описание
row	keyword	Заполняет ряд за рядом (по умолчанию).
column	keyword	Заполняет колонку за колонкой, добавляя новые колонки.
dense	keyword	Заполняет ранние дыры более мелкими элементами, которые идут позже.

Примеры

dense заполняет пустоты, оставшиеся после широких элементов:

<style>
  .grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-flow: dense; gap: 6px; }
  .grid div { padding: 8px; background: lightskyblue; }
  .wide { grid-column: span 2; background: gold !important; }
</style>
 
<div class="grid">
  <div>1</div><div class="wide">2 wide</div><div class="wide">3 wide</div><div>4</div><div>5</div>
</div>

Примечания

dense меняет видимый порядок элементов, что может запутать пользователей клавиатуры. Он подходит для галерей, где порядок не важен.

См. также

grid-template-rows — Количество и высота рядов сетки.
grid-column — Какие колонки занимает элемент сетки.

В учебнике

Grid — Сетка CSS Grid — колонки и строки, единица fr, функции repeat и minmax, промежутки и адаптивная сетка без медиазапросов.

Спасибо, что читаете!