Клавиша / esc

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: 20px;}.item3 {  /* Занимает один ряд и растягивается на две колонки */  grid-column: span 2;}
          .container {
  display: grid;
  /* Три колонки */
  grid-template-columns: auto auto auto;
  /* Два ряда */
  grid-template-rows: auto auto;
  /* Автоматическое размещение в ряд */
  grid-auto-flow: row;
  /* Отступы между ячейками */
  gap: 20px;
}

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

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

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

Как понять

Скопировано

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

Как пишется

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

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

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

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

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

Подсказки

Скопировано
Поддержка в браузерах:
  • Chrome 66, поддерживается
  • Edge 79, поддерживается
  • Firefox 76, поддерживается
  • Safari 12.1, поддерживается
О Baseline