`grid-auto-flow`

Время чтения: меньше 5 мин

Кратко

Если грид-элементов больше, чем явно объявленных колонок или рядов, то они автоматически размещаются внутри родителя. А вот каким образом — в ряд или в колонку — можно указать при помощи свойства grid-auto-flow.

Пример

Принципы работы этого свойства удобнее всего изучать на примере, когда есть большой блок, который не помещается в одну грид-ячейку.

        
          
          .container {  display: grid;  /* Три колонки */  grid-template-columns: auto auto auto;  /* Два ряда */  grid-template-rows: auto auto;  /* Автоматическое размещение в ряд */  grid-auto-flow: row;  /* Отступы между ячейками */  gap: 10px;  /* Для красоты */  padding: 10px;  background: #f1f1f1;}.item {  min-height: 50px;  text-align: center;  padding: 20px 0;  font-size: 30px;  line-height: 1;  background: lightblue;}.item3 {  /* Занимает один ряд и растягивается на две колонки */  grid-column: span 2;  background: pink;}
          .container {
  display: grid;
  /* Три колонки */
  grid-template-columns: auto auto auto;
  /* Два ряда */
  grid-template-rows: auto auto;
  /* Автоматическое размещение в ряд */
  grid-auto-flow: row;
  /* Отступы между ячейками */
  gap: 10px;

  /* Для красоты */
  padding: 10px;
  background: #f1f1f1;
}

.item {
  min-height: 50px;
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
  line-height: 1;
  background: lightblue;
}

.item3 {
  /* Занимает один ряд и растягивается на две колонки */
  grid-column: span 2;
  background: pink;
}

Пример реализации свойства grid-auto-flow со значением row.

Как видите, третий элемент не поместился в последнюю ячейку первого ряда и был перенесён на следующую строку. Следующий за ним четвёртый элемент встал в ближайшую доступную ячейку во втором ряду.

Как это понять

Свойство grid-template-rows командует браузеру, во сколько рядов выстраивать вложенные элементы. И какого размера должны быть эти ряды.

Как пишется

row (значение по умолчанию) — автоматически размещаемые элементы выстраиваются в ряды.
column — автоматически размещаемые элементы выстраиваются в колонки.
dense — браузер старается заполнить дырки (пустые ячейки) в разметке, если размеры элементов позволяют. Можно сочетать с остальными значениями.

Для иллюстрации работы ключевого слова dense добавим его к значению свойства grid-auto-flow в примере выше:

        
          
          .container {  grid-template-columns: auto auto auto;  /* Автоматическое размещение в ряд */  grid-auto-flow: row dense;}
          .container {
  grid-template-columns: auto auto auto;
  /* Автоматическое размещение в ряд */
  grid-auto-flow: row dense;
}

Пример реализации свойства grid-auto-flow со значением row dense.

Теперь четвёртый элемент встал в ряд, но занял при этом пустую ячейку в первом ряду. Браузер старается закрыть все дырки в сетке, переставляя подходящие элементы на свободные места.

Подсказки