grid-auto-flow
Пример
Вставлять автоматически размещаемые элементы столбец за столбцом:
.grid-container {
display: grid;
grid-auto-flow:
column;
}
Попробуйте сами »
Определение grid-auto-flow
CSS свойство grid-auto-flow
управляет тем, как автоматически размещенные элементы вставляются в сетку.
Значение по умолчанию: | row |
---|---|
Унаследовано: | no |
Анимируемый: | yes. Читайте о animatable Попробуй |
Версия: | CSS Макет сетки Модуль Уровень 1 |
JavaScript синтаксис: | object.style.gridAutoFlow="row dense" Попробуй |
Поддержка grid-auto-flow
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
Свойство | |||||
---|---|---|---|---|---|
grid-auto-flow | 57 | 16 | 52 | 10 | 44 |
Синтаксис grid-auto-flow
grid-auto-flow:
row|column|dense|row dense|column dense;
Значения grid-auto-flow
Значение | Описание | Демонстрация |
---|---|---|
row | Значение по умолчанию. Размещает элементы, заполняя каждую строку | Демо ❯ |
column | Размещает элементы, заполняя каждый столбец | Демо ❯ |
dense | Размещайте предметы так, чтобы заполнить все отверстия в сетке | Демо ❯ |
row dense | Размещайте элементы, заполняя каждую строку, и заполняйте все отверстия в сетке | Демо ❯ |
column dense | Размещайте элементы, заполняя каждый столбец, и заполняйте все отверстия в сетке | Демо ❯ |
Примеры grid-auto-flow
Пример
Заполните все отверстия в сетке, добавив значение "dense":
.grid-container {
display: grid;
grid-auto-flow: row
dense;
}
Попробуйте сами »
Страницы по теме grid-auto-flow
CSS Учебник: CSS Сетка макет