grid-auto-flow
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.
CSS-свойство управляет поведением автоматически размещаемых элементов, точно указывая, как они попадают в сетку.
Интерактивный пример
Синтаксис
/* Ключевые слова */
grid-auto-flow: row;
grid-auto-flow: column;
grid-auto-flow: dense;
grid-auto-flow: row dense;
grid-auto-flow: column dense;
/* Глобальные значения */
grid-auto-flow: inherit;
grid-auto-flow: initial;
grid-auto-flow: unset;
Свойство можно использовать в двух вариантах:
- с одним ключевым значением:
row
,column
, илиdense
. - с двумя значениями:
row dense
илиcolumn dense
.
Значения
row
-
Ключевое слово, указывающее размещать элементы, заполняя поочерёдно каждую строку и добавляя новые строки по мере необходимости. Это значение используется по умолчанию.
column
-
Ключевое слово, указывающее размещать элементы, заполняя поочерёдно каждый столбец и добавляя новые столбцы по мере необходимости.
dense
-
Ключевое слово, указывающее заполнять элементами свободное пространство сетки. Это может привести к нарушению порядка, т.к. элементы будут выстраиваться не в соответствии со своим расположением, а в соответствии с размером.Если свойство не используется, алгоритм разместит элементы строго по порядку, вне зависимости от наличия свободных ячеек.
Formal definition
Начальное значение | row |
---|---|
Применяется к | сеточные контейнеры |
Наследуется | нет |
Обработка значения | как указано |
Animation type | discrete |
Formal syntax
Примеры
HTML Content
<div id="grid">
<div id="item1"></div>
<div id="item2"></div>
<div id="item3"></div>
<div id="item4"></div>
<div id="item5"></div>
</div>
<select id="direction" onchange="changeGridAutoFlow()">
<option value="column">column</option>
<option value="row">row</option>
</select>
<input id="dense" type="checkbox" onchange="changeGridAutoFlow()" />
<label for="dense">dense</label>
CSS Content
#grid {
height: 200px;
width: 200px;
display: grid;
grid-gap: 10px;
grid-template: repeat(4, 1fr) / repeat(2, 1fr);
grid-auto-flow: column; /* or 'row', 'row dense', 'column dense' */
}
#item1 {
background-color: lime;
grid-row-start: 3;
}
#item2 {
background-color: yellow;
}
#item3 {
background-color: blue;
}
#item4 {
grid-column-start: 2;
background-color: red;
}
#item5 {
background-color: aqua;
}
Спецификации
Specification |
---|
CSS Grid Layout Module Level 2 # grid-auto-flow-property |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- Related CSS properties:
grid-auto-rows
,grid-auto-columns
,grid
- Grid Layout Guide: Auto-placement in grid layout
- Video tutorial: Introducing Grid auto-placement and order