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 Значение элемента наследуется от родительского элемента.

Поддержка браузера

57.0+ 16.0+ 52.0+ 10.1+ 44.0+


Считаете ли это полезным?

Похожие статьи