skip to main content

grid-auto-flow

css

Кратко 🔗

Если грид-элементов больше, чем явно объявленных колонок или рядов, то они автоматически размещаются внутри родителя. А вот каким образом — в ряд или в колонку — можно указать при помощи свойства grid-auto-flow.

Пример 🔗

Примеры работы этого свойства удобнее всего изучать в случае, когда есть большой блок, который не помещается в одну грид-ячейку.

.container {
display: grid;
/* Три колонки */
grid-template-columns: auto auto auto;
/* Два ряда */
grid-template-rows: auto auto;
/* Отступы между ячейками */
grid-gap: 10px;
/* Автоматическое размещение в ряд */
grid-auto-flow: row;

/* Для красоты */
padding: 10px;
background: #f1f1f1;
}

.item {
min-height: 50px;
text-align: center;
padding: 20px 0;
font-size: 30px;
line-height: 1;
background: lightblue;
}

.item3 {
/* Занимает один ряд и растягивается на две колонки */
grid-column: span 2;
background: pink;
}

Пример реализации свойства grid-auto-flow со значением row

Как видите, третий элемент не поместился в последнюю ячейку первого ряда и был перенесён на следующую строку. Следующий за ним четвёртый элемент встал в ближайшую доступную ячейку во втором ряду.

Как это понять 🔗

Свойство grid-template-rows командует браузеру, в сколько рядов выстраивать вложенные элементы. И какого размера должны быть эти ряды.

Как пишется 🔗

  • row (значение по умолчанию) — автоматически размещаемые элементы выстраиваются в ряды.
  • column — автоматически размещаемые элементы выстраиваются в колонки.
  • dense — браузер старается заполнить дырки (пустые ячейки) в разметке, если размеры элементов позволяют. Можно сочетать с остальными значениями.

Для иллюстрации работы ключевого слова dense добавим его к значению свойства grid-auto-flow в примере выше:

.container {
grid-template-columns: auto auto auto;
/* Автоматическое размещение в ряд */
grid-auto-flow: row dense;
}

Пример реализации свойства grid-auto-flow со значением row dense

Теперь четвёртый элемент встал в ряд, но занял при этом пустую ячейку в первом ряду. Браузер старается закрыть все дырки в сетке, переставляя подходящие элементы на свободные места.

Подсказки 🔗

Автор: Алёна,