Автоматические столбцы сетки

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

Класс	Свойства
auto-cols-auto	grid-auto-columns: auto;
auto-cols-min	grid-auto-columns: min-content;
auto-cols-max	grid-auto-columns: max-content;
auto-cols-fr	grid-auto-columns: minmax(0, 1fr);

Применение

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

<div class="grid grid-flow-col auto-cols-max">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

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

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

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

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

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

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

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

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

Варианты

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

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

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

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

Отключение

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

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