Пример
Вставлять автоматически размещаемые элементы столбец за столбцом:
.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 Сетка макет