Свойство grid-auto-flow в CSS

Определение и использование

Свойство grid-auto-flow контролирует, как автоматически размещаемые элементы вставляются в сетку.

См. также:

Урок CSS:CSS Grid Layout

Пример

Пример 1

Вставляйте автоматически размещаемые элементы по колонкам:

.grid-container {
  display: grid;
  grid-auto-flow: column;
}

Попробуйте сами

Пример 2

Заполните все отверстия в сетке, добавив значение "dense":

.grid-container {
  display: grid;
  grid-auto-flow: row dense;
}

Попробуйте сами

Синтаксис CSS

grid-auto-flow: row|column|dense|row dense|column dense;

Значение атрибута

Значение Описание
row Значение по умолчанию. Разместите элементы, заполняя каждую строку.
column Разместите элементы, заполняя каждую колонку.
dense Разместите элементы, чтобы заполнить все отверстия в сетке.
row dense Разместите элементы, чтобы заполнить все отверстия в сетке, заполняя каждую строку и любые отверстия в сетке.
column dense Разместите элементы, чтобы заполнить все отверстия в сетке, заполняя каждую колонку и любые отверстия в сетке.

Технические детали

Значение по умолчанию: row
Инheritance: Нет
Создание анимации: Поддерживается. См. также:Свойства анимации.
Версия: Модуль CSS Grid Layout Level 1
Синтаксис JavaScript: object.style.gridAutoFlow="row dense"

Поддержка браузера

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот атрибут.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44