Создание сайта на CMS WordPress: обучение и хостинг

СВОЙСТВО GRID-AUTO-FLOW

Свойство grid-auto-flow управляет работой алгоритма автоматического размещения, определяя, как автоматически размещаемые элементы попадают в сетку.

Поддержка браузеров


16+

Синтаксис

grid-auto-flow: row|column|dense|row dense|column dense

Значения свойства

Значение	Описание
row	Размещает элементы заполняя каждый ряд. Это значение по умолчанию.
column	Размещает элементы заполняя каждый столбец.
dense	Размещает элементы заполняя пустые места в сетке.
row dense	Размещает элементы заполняя каждый ряд и пустые места в сетке.
column dense	Размещает элементы заполняя каждый столбец и пустые места в сетке.
initial	Устанавливает значение по умолчанию.
inherit	Унаследует значение свойства от родительского элемента.

Песочница

<div class="grid">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

HTML

.grid {
    display: grid;
    grid-gap: 15px;
    background-color: #f1f1f1;
    grid-auto-flow: column;
    grid-template-rows: auto auto
}

.item {height: 100px}

.item:nth-child(1) {background: yellow}
.item:nth-child(2) {background: blue}
.item:nth-child(3) {background: beige}
.item:nth-child(4) {background: yellow}
.item:nth-child(5) {background: blue}
.item:nth-child(6) {background: beige}

CSS

← Перейти к списку свойств