Автоматический поток сетки

Справочник классов по умолчанию

Класс	Свойства
grid-flow-row	grid-auto-flow: row;
grid-flow-col	grid-auto-flow: column;
grid-flow-row-dense	grid-auto-flow: row dense;
grid-flow-col-dense	grid-auto-flow: column dense;

Применение

Используйте утилиты grid-flow-{keyword} для управления работой алгоритма автоматического размещения для макета сетки.

<div class="grid grid-flow-col grid-cols-3 grid-rows-3 gap-4">
  <div>1</div>
  <!-- ... -->
  <div>9</div>
</div>

Адаптивность

Чтобы управлять свойством grid-auto-flow в определенной контрольной точке, добавьте префикс {screen}: к любой существующей утилите grid-auto-flow. Например, используйте md:grid-flow-col, чтобы применить утилиту grid-flow-col только при средних размерах экрана и выше.

<div class="grid md:grid-flow-col ...">
  <div>1</div>
  <!-- ... -->
  <div>9</div>
</div>

Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией Адаптивного дизайна.

Кастомизация

Варианты

По умолчанию, только responsive варианты создаются для утилит grid-auto-flow.

Вы можете контролировать, какие варианты создаются для утилит grid-auto-flow для изменения свойства gridAutoFlow в разделе variants Вашего файла конфигурации tailwind.config.js.

Например, эта конфигурация также будет генерировать варианты hover и focus:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       gridAutoFlow: ['hover', 'focus'],
      }
    }
  }

Отключение

Если Вы не планируете использовать в своем проекте утилиты для изменения grid-auto-flow, Вы можете полностью отключить их, установив для gridAutoFlow свойство значение false в разделе corePlugins Вашего файла конфигурации:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     gridAutoFlow: false,
    }
  }