CSS свойство grid-auto-flow
Определение и применение
Свойство grid-auto-flow управляет автоматическим размещением Grid-элементов без полностью заданной
позиции.
dense возвращается к оставленным пропускам и пытается заполнить их более поздними элементами. Это может
изменить визуальный порядок относительно HTML; порядок чтения и Tab не перестраивается.
Явно размещённые элементы занимают свои области прежде автоматического размещения. Для видимого различия между
row и column задайте и строки, и столбцы.
Связанные свойства:
grid-template-columns,
grid-template-rows.
Сравните автоматическое размещение по строкам, колонкам и заполнение пропусков с dense в
генераторе Grid. Настройки
можно проверить в превью и сохранить как HTML/CSS.
Попробуйте значения grid-auto-flow
Меняется направление автозаполнения. dense может заполнять пропуски; без пропусков он выглядит как row.
grid-auto-flow: row
HTML и CSS примера
<div class="stage demo-target">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
* {
box-sizing: border-box;
}
.stage {
width: 100%;
max-width: 300px;
height: 210px;
padding: 10px;
border: 2px dashed #607589;
background: #edf2f5;
color: #172c3d;
font: 16px/1.4 system-ui;
}
.item {
padding: 10px;
border: 2px solid #245a85;
background: #b9d7eb;
}
.demo-target {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 60px);
gap: 8px;
grid-auto-flow: row;
}
.item:first-child {
grid-column: span 2;
}
* {
box-sizing: border-box;
}
.stage {
width: 100%;
max-width: 300px;
height: 210px;
padding: 10px;
border: 2px dashed #607589;
background: #edf2f5;
color: #172c3d;
font: 16px/1.4 system-ui;
}
.item {
padding: 10px;
border: 2px solid #245a85;
background: #b9d7eb;
}
.demo-target {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 60px);
gap: 8px;
grid-auto-flow: column;
}
.item:first-child {
grid-column: span 2;
}
* {
box-sizing: border-box;
}
.stage {
width: 100%;
max-width: 300px;
height: 210px;
padding: 10px;
border: 2px dashed #607589;
background: #edf2f5;
color: #172c3d;
font: 16px/1.4 system-ui;
}
.item {
padding: 10px;
border: 2px solid #245a85;
background: #b9d7eb;
}
.demo-target {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 60px);
gap: 8px;
grid-auto-flow: row dense;
}
.item:first-child {
grid-column: span 2;
}
Сравнение при ltr и rtl: grid-auto-flow
Выберите direction (направление письма). Во всех схемах задано
writing-mode: horizontal-tb (горизонтальное письмо, строки идут сверху вниз).
grid-auto-flow: row;
grid-auto-flow: column;
В режиме row сначала заполняется строка, в режиме column — столбец. В HTML порядок
одинаковый: 1–6.
Поддержка браузерами
Спецификация: CSS grid
Поддерживается во всех основных браузерах с 2017 года.
| Возможность | Компьютеры | Мобильные | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
 Chrome |  Edge |  Firefox |  Opera |  Safari | Chrome Android | Firefox for Android | Opera Android |  Safari on iOS |  Samsung Browser |  WebView Android | WebView on iOS | |
grid-auto-flow | 57 | 16 | 52 | 44 | 10.1 | 57 | 52 | 43 | 10.3 | 6.0 | 57 | 10.3 |
column | 57 | 79 | 52 | 44 | 10.1 | 57 | 52 | 43 | 10.3 | 7.0 | 57 | 10.3 |
dense | 57 | 79 | 52 | 44 | 10.1 | 57 | 52 | 43 | 10.3 | 7.0 | 57 | 10.3 |
row | 57 | 79 | 52 | 44 | 10.1 | 57 | 52 | 43 | 10.3 | 7.0 | 57 | 10.3 |
поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31
Синтаксис
grid-auto-flow: [ row | column ] || dense;
/* Глобальные значения */
grid-auto-flow: initial | inherit | unset | revert | revert-layer;
| разделяет варианты. || разрешает одну или обе составляющие в любом порядке. Квадратные
скобки группируют варианты; внутри типа задают допустимый диапазон.
JavaScript:
element.style.gridAutoFlow="row";Начальное значение свойства
row.
Значения свойства
| Значение | Описание |
|---|---|
row |
Заполняет строку и при необходимости создаёт следующие строки. |
column |
Заполняет столбец и при необходимости создаёт следующие столбцы. |
dense |
Дополнение к row или column, включающее заполнение пропусков. Самостоятельное
dense означает row dense. Без него алгоритм не возвращается заполнять предыдущие
пропуски.
|
initial |
Устанавливает начальное значение свойства. |
inherit |
Наследует вычисленное значение свойства у родительского элемента. |
unset |
Для ненаследуемого свойства grid-auto-flow устанавливает его
начальное значение.
|
revert |
Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS. |
revert-layer |
Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя
по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.
|
Спецификация
CSS Grid Layout — спецификация grid-auto-flow.
Наследуется
Нет.
Анимируемое
Дискретно: значение переключается, а не создаёт плавное перемещение элементов.
Примеры, попробуйте сами
Дорожки и промежутки Grid
Замените row на column: изменится порядок заполнения ячеек.
base.css
* {
box-sizing: border-box;
}
body {
margin: 16px;
font:
16px/1.5 system-ui,
sans-serif;
color: #172c3d;
}
section {
margin-bottom: 24px;
min-width: 0;
}
h3 {
margin: 0 0 12px;
font-size: 16px;
}
.item {
padding: 8px;
min-width: 0;
background: #c5dbea;
border: 1px solid #35658a;
overflow-wrap: anywhere;
}
index.html
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Дорожки и промежутки Grid</title>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item target">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
</body>
</html>
style.css
.container {
display: grid;
grid-template: repeat(2, 60px) / repeat(2, 1fr);
grid-auto-flow: row;
}
Тони готовит пример…Заполнение пропусков в сетке
Вариант A оставляет свободную ячейку в первой строке. В B режим dense переносит туда элемент 3. Уберите dense и сравните. Порядок элементов в HTML одинаковый.
base.css
* {
box-sizing: border-box;
}
body {
margin: 16px;
font:
16px/1.5 system-ui,
sans-serif;
color-scheme: light dark;
background: Canvas;
color: CanvasText;
}
.item {
min-width: 0;
padding: 8px;
overflow-wrap: anywhere;
border: 1px solid #447a9b;
background: light-dark(#e4f0f8, #293e50);
}
.container {
outline: 1px dashed;
}
section {
margin-bottom: 24px;
}
h2 {
font-size: 16px;
}
index.html
<html lang="ru">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Заполнение пропусков в сетке</title>
</head>
<body>
<section>
<h2>Вариант A</h2>
<div class="container sparse">
<div class="item">1</div>
<div class="item target">2</div>
<div class="item">3</div>
</div>
</section>
<section>
<h2>Вариант B</h2>
<div class="container dense">
<div class="item">1</div>
<div class="item target">2</div>
<div class="item">3</div>
</div>
</section>
</body>
</html>
style.css
.container {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-auto-rows: 50px;
gap: 8px;
}
.item:nth-child(-n + 2) {
grid-column: span 2;
}
.sparse {
grid-auto-flow: row;
}
.dense {
grid-auto-flow: row dense;
}