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

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

Свойство имеет следующие значения - row, column, dense, row-dense, column-dense. Если не задано "row" или "column" подразумевается значение "row".

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

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .grey-container {
      display: grid;
      grid-template-columns: auto auto auto;
      grid-template-rows: auto auto;
      grid-auto-flow: column;
      grid-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</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>

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

Пример со значением "row":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .white-container {
      display: grid;
      grid-template-columns: auto auto auto;
      grid-template-rows: auto auto;
      grid-auto-flow: row;
      grid-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</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>

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

Значения

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