grid-auto-flow

/* Keyword values */
grid-auto-flow: row;
grid-auto-flow: column;
grid-auto-flow: dense;
grid-auto-flow: row dense;
grid-auto-flow: column dense;

/* Global values */
grid-auto-flow: inherit;
grid-auto-flow: initial;
grid-auto-flow: revert;
grid-auto-flow: revert-layer;
grid-auto-flow: unset;

Это свойство может иметь одну из двух форм:

• единственное ключевое слово: одно из row, column, или dense.
• два ключевых слова: row dense или column dense.

row

Элементы размещаются, заполняя каждую строку по очереди, добавляя новые строки по мере необходимости. Если ни row , ни column не указаны, предполагается row.

column

Элементы размещаются, заполняя каждый столбец по очереди, добавляя новые столбцы по мере необходимости.

dense

Алгоритм «плотного» размещения пытается заполнить пробелы в сетке ранее, если более мелкие элементы появляются позже. Это может привести к тому, что элементы будут расположены не в порядке, если это позволит заполнить пробелы, оставленные большими элементами.

Если он опущен, используется алгоритм «разреженный», где алгоритм размещения перемещается только «вперед» в сетке при размещении элементов, никогда не возвращаясь назад для заполнения пробелов. Это гарантирует, что все автоматически размещенные элементы появятся «в порядке», даже если это оставит пробелы, которые могли бы быть заполнены более поздними элементами.

grid-auto-flow = 
  [ row | column ]  ||
  dense             

HTML

<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
  <div id="item4"></div>
  <div id="item5"></div>
</div>
<select id="direction">
  <option value="column">column</option>
  <option value="row">row</option>
</select>
<input id="dense" type="checkbox" />
<label for="dense">dense</label>

CSS

#grid {
  height: 200px;
  width: 200px;
  display: grid;
  gap: 10px;
  grid-template: repeat(4, 1fr) / repeat(2, 1fr);
  grid-auto-flow: column; /* or 'row', 'row dense', 'column dense' */
}

#item1 {
  background-color: lime;
  grid-row-start: 3;
}

#item2 {
  background-color: yellow;
}

#item3 {
  background-color: blue;
}

#item4 {
  grid-column-start: 2;
  background-color: red;
}

#item5 {
  background-color: aqua;
}

Результат

• grid-auto-rows
• grid-auto-columns
• grid
• Автоматическое размещение в макете сетки
• Видео: Знакомство с автоматическим размещением и порядком сетки