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

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

Когда вы размещаете элементы вручную с помощью grid-column-start, grid-row-start или grid-area, браузер помещает их именно туда, куда вы указываете. Все остальные элементы размещаются автоматически, а grid-auto-flow определяет порядок и направление, которые браузер использует для заполнения оставшихся ячеек. Это делает данное свойство незаменимым, когда у вас есть контейнер сетки с переменным или неизвестным количеством дочерних элементов и вы хотите, чтобы они располагались предсказуемо без явного задания размеров каждого из них.

Это свойство принимает следующие ключевые слова: row, column, dense, row-dense и column-dense. Можно использовать одно ключевое слово (row, column или dense) или два ключевых слова, где одно задаёт направление, а другое — dense (row dense / column dense). Если направление не указано, по умолчанию используется row.

Как это работает

row (значение по умолчанию) заполняет сетку по одной строке за раз, слева направо, добавляя новые строки по мере необходимости.
column заполняет по одному столбцу за раз, сверху вниз, добавляя новые столбцы по мере необходимости.
dense включает алгоритм плотной упаковки. По умолчанию (редкая упаковка) алгоритм движется только вперёд, поэтому большой элемент может оставить пустое место позади себя, которое меньшие последующие элементы пропускают. При использовании dense браузер возвращается назад, чтобы заполнить эти пустые места любым подходящим элементом — это может привести к тому, что элементы отобразятся не в порядке DOM. Используйте этот режим только тогда, когда визуальная плотность важнее порядка чтения и навигации с клавиатуры, поскольку это может ухудшить доступность.

Начальное значение	row
Применяется к	Контейнерам сетки.
Наследуется	Нет.
Анимируется	Нет.
Версия	CSS Grid Layout Module Level 1
DOM-синтаксис	object.style.gridAutoFlow = "row";

Синтаксис

Синтаксис CSS свойства grid-auto-flow

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

Пример: grid-auto-flow: column

При использовании grid-auto-flow: column четыре элемента заполняют сетку по одному столбцу за раз. Сравните с примером row ниже, чтобы увидеть разницу в порядке размещения.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grey-container {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-template-rows: auto auto;
        grid-auto-flow: column;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grey-container > div {
        background-color: #eee;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-auto-flow property example</h2>
    <h3>grid-auto-flow: column</h3>
    <div class="grey-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
  </body>
</html>

Попробуйте сами »

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

Пример: grid-auto-flow: row

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .white-container {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-template-rows: auto auto;
        grid-auto-flow: row;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .white-container > div {
        background-color: #fff;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-auto-flow property example</h2>
    <h3>grid-auto-flow: row</h3>
    <div class="white-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
  </body>
</html>

Попробуйте сами »

Пример: grid-auto-flow: row (с явным размещением)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grey-container {
        height: 250px;
        width: 250px;
        display: grid;
        gap: 20px;
        grid-template: repeat(4, 1fr) / repeat(2, 1fr);
        grid-auto-flow: row;
        background-color: #ccc;
        padding: 10px;
      }
      .box1 {
        background-color: #00f3ff;
        grid-row-start: 3;
      }
      .box2 {
        background-color: #ff00d4;
      }
      .box3 {
        background-color: #827c7c;
      }
      .box4 {
        grid-column-start: 2;
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <div class="grey-container">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
      <div class="box4"></div>
    </div>
  </body>
</html>

Попробуйте сами »

Результат

Пример: grid-auto-flow: column (с явным размещением)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grey-container {
        height: 250px;
        width: 250px;
        display: grid;
        gap: 20px;
        grid-template: repeat(4, 1fr) / repeat(2, 1fr);
        grid-auto-flow: column;
        background-color: #ccc;
        padding: 10px;
      }
      .box1 {
        background-color: #00f3ff;
        grid-row-start: 3;
      }
      .box2 {
        background-color: #827c7c;
      }
      .box3 {
        background-color: #ff00d4;
      }
      .box4 {
        grid-column-start: 2;
        background-color: #4cbb13;
      }
    </style>
  </head>
  <body>
    <div class="grey-container">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
      <div class="box4"></div>
    </div>
  </body>
</html>

Попробуйте сами »

Пример: grid-auto-flow: column-dense

Следующие два примера демонстрируют варианты плотной упаковки dense. Поскольку box1 явно помещён в строку 3 (grid-row-start: 3), в начале сетки образуется пустое место. Ключевое слово dense позволяет браузеру заполнить это место более поздним элементом вместо того, чтобы оставлять его пустым — компактно, но элементы уже не следуют порядку в исходном коде.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grey-container {
        height: 250px;
        width: 250px;
        display: grid;
        gap: 20px;
        grid-template: repeat(4, 1fr) / repeat(2, 1fr);
        grid-auto-flow: column-dense;
        background-color: #ccc;
        padding: 10px;
      }
      .box1 {
        background-color: #0ad6e0;
        grid-row-start: 3;
      }
      .box2 {
        background-color: #841c72;
      }
      .box3 {
        background-color: #827c7c;
      }
      .box4 {
        grid-column-start: 2;
        background-color: #4cbb13;
      }
    </style>
  </head>
  <body>
    <div class="grey-container">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
      <div class="box4"></div>
    </div>
  </body>
</html>

Попробуйте сами »

Пример: grid-auto-flow: row-dense

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grey-container {
        height: 250px;
        width: 250px;
        display: grid;
        gap: 20px;
        grid-template: repeat(4, 1fr) / repeat(2, 1fr);
        grid-auto-flow: row-dense;
        background-color: #ccc;
        padding: 10px;
      }
      .box1 {
        background-color: #0ad6e0;
        grid-row-start: 3;
      }
      .box2 {
        background-color: #841c72;
      }
      .box3 {
        background-color: #827c7c;
      }
      .box4 {
        grid-column-start: 2;
        background-color: #4cbb13;
      }
    </style>
  </head>
  <body>
    <div class="grey-container">
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
      <div class="box4"></div>
    </div>
  </body>
</html>

Попробуйте сами »

Значения

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

Когда использовать

Используйте grid-auto-flow, когда количество элементов сетки динамично — список карточек, фотогалерея, облако тегов — и вы хотите, чтобы браузер размещал их автоматически. Переключитесь на column, когда содержимое должно читаться сверху вниз перед переносом, и добавляйте dense только тогда, когда заполнение каждого пустого места важнее соблюдения порядка элементов в исходном коде.

Размер неявно созданных дорожек регулируется отдельно с помощью grid-auto-columns и grid-auto-rows. Для явных макетов смотрите grid-template и главную главу CSS Grid.

Практика

Что делает CSS свойство grid-auto-flow?

Оно определяет распределение строк и столбцов в сеткеОно задаёт цвет для каждого слова в текстовой сеткеОно управляет автоматическим размещением элементов сеткиОно задаёт размер линий сеткиОно создаёт трёхмерную сетку