Автоматические ряды сетки

Применение

Используйте утилиты auto-rows-{size} для управления размером неявно создаваемых строк сетки.

<div class="grid grid-flow-row auto-rows-max">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

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

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

<div class="grid grid-flow-row auto-rows-max md:auto-rows-min">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

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

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

По умолчанию Tailwind включает в себя четыре универсальных утилиты grid-auto-rows. Вы можете настроить их в разделе theme.gridAutoRows Вашего файла tailwind.config.js.

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        gridAutoRows: {
          '2fr': 'minmax(0, 2fr)',
        }
      }
    }
  }

Дополнительные сведения о настройке темы по умолчанию смотрите в документации по настройке темы.

Варианты

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

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

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

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

Отключение

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

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