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 октябрь 2017 г..
CSS-свойство управляет поведением автоматически размещаемых элементов, точно указывая, как они попадают в сетку.
Интерактивный пример
grid-auto-flow: row; grid-auto-flow: column; grid-auto-flow: row dense; <section class="default-example" id="default-example"> <div class="example-container"> <div class="transition-all" id="example-element"> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> </div> </div> </section> #example-element { border: 1px solid #c5c5c5; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: repeat(3, minmax(40px, auto)); grid-gap: 10px; width: 220px; } #example-element > div { background-color: rgba(0, 0, 255, 0.2); border: 3px solid blue; } #example-element > div:nth-child(1) { grid-column: auto / span 2; } #example-element > div:nth-child(2) { grid-column: auto / span 2; } Синтаксис
/* Ключевые слова */ 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
grid-auto-flow =
[ row | column ] ||
dense
Примеры
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 |
Совместимость с браузерами
Смотрите также
- 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