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

Описание

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

Синтаксис

grid-auto-flow: row | column | dense | row dense | column dense;
Значение Описание
row Алгоритм размещает элементы, заполняя каждую строку поочередно, добавляя новые строки по мере необходимости.
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

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