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

Свойство grid-auto-flow 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: rgb(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;
}

Синтаксис

/* Keyword values */
grid-auto-flow: row;
grid-auto-flow: column;
grid-auto-flow: dense;
grid-auto-flow: row dense;
grid-auto-flow: column dense;

/* Global values */
grid-auto-flow: inherit;
grid-auto-flow: initial;
grid-auto-flow: revert;
grid-auto-flow: revert-layer;
grid-auto-flow: unset;

Это свойство может принимать одну из двух форм:

• одно ключевое слово: одно из row, column или dense.
• два ключевых слова: row dense или column dense.

Значения

row

Элементы размещаются по очереди в каждой строке, при необходимости добавляются новые строки. Если не указано ни row, ни column, предполагается row.

column

Элементы размещаются по очереди в каждом столбце, при необходимости добавляются новые столбцы.

dense

Алгоритм плотного уплотнения пытается заполнить свободные места в сетке, если позднее появляются элементы меньшего размера. Это может привести к нарушению порядка элементов, если такое размещение позволяет заполнить места, оставшиеся после размещения более крупных элементов.

Если это значение не указано, используется разреженный алгоритм, при котором при размещении элементов алгоритм перемещается по сетке только «вперёд» и никогда не возвращается назад, чтобы заполнить свободные места. Это гарантирует, что все автоматически размещаемые элементы появляются «по порядку», даже если при этом остаются места, которые могли бы заполнить последующие элементы.

Формальное определение

Формальный синтаксис

grid-auto-flow = 
  [ row | column ] ||
  dense

Примеры

Настройка автоматического размещения в сетке

HTML

<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">
  <option value="column">column</option>
  <option value="row">row</option>
</select>
<input id="dense" type="checkbox" />
<label for="dense">dense</label>

CSS

#grid {
  height: 200px;
  width: 200px;
  display: 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;
}

function changeGridAutoFlow() {
  const grid = document.getElementById("grid");
  const direction = document.getElementById("direction");
  const dense = document.getElementById("dense");
  let gridAutoFlow = direction.value === "row" ? "row" : "column";

  if (dense.checked) {
    gridAutoFlow += " dense";
  }

  grid.style.gridAutoFlow = gridAutoFlow;
}

const selectElem = document.querySelector("select");
const inputElem = document.querySelector("input");
selectElem.addEventListener("change", changeGridAutoFlow);
inputElem.addEventListener("change", changeGridAutoFlow);

Результат

Спецификации

Совместимость с браузерами

См. также

• grid-auto-rows
• grid-auto-columns
• grid
• Автоматическое размещение в макете сетки
• Видео: Знакомство с автоматическим размещением и порядком элементов в сетке