Свойство grid-auto-flow

Описание

Управляет тем, как работает алгоритм автоматического размещения, точно указывая, как элементы попадают в сетку. Если у вас есть элементы, которые вы явно не позиционируете в сетке, запускается алгоритм авто-размещения, чтобы их автоматически разместить. Это свойство контролирует то, как алгоритм авто-размещения работает.

Синтаксис

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

Пример

<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
 #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;
 }
 </style>
 <div id='grid'>
 <div id='item1'>1</div>
 <div id='item2'>2</div>
 <div id='item3'>3</div>
 <div id='item4'>4</div>
 <div id='item5'>5</div>
 </div>
</body>
</html>

1

2

3

4

5

Свойство grid-auto-flow

Описание

Синтаксис

Пример

Читайте также

Свойство mix-blend-mode

Свойство left

Правило @supports

Свойство text-align

Свойство grid-column-end

Значение	Описание
row	Алгоритм размещает элементы, заполняя каждую строку поочередно, добавляя новые строки по мере необходимости.
column	Алгоритм помещает элементы, заполняя каждый столбец поочередно, добавляя по мере необходимости новые столбцы.
dense	Алгоритм использует «плотный» алгоритм упаковки, который пытается заполнить дыры в сетке, если позже появятся более мелкие элементы. Это может привести к тому, что элементы появятся не по порядку, но при этом заполнят отверстия, оставленные более крупными элементами.