Столбцы шаблона сетки

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

Класс	Свойства
grid-cols-1	grid-template-columns: repeat(1, minmax(0, 1fr));
grid-cols-2	grid-template-columns: repeat(2, minmax(0, 1fr));
grid-cols-3	grid-template-columns: repeat(3, minmax(0, 1fr));
grid-cols-4	grid-template-columns: repeat(4, minmax(0, 1fr));
grid-cols-5	grid-template-columns: repeat(5, minmax(0, 1fr));
grid-cols-6	grid-template-columns: repeat(6, minmax(0, 1fr));
grid-cols-7	grid-template-columns: repeat(7, minmax(0, 1fr));
grid-cols-8	grid-template-columns: repeat(8, minmax(0, 1fr));
grid-cols-9	grid-template-columns: repeat(9, minmax(0, 1fr));
grid-cols-10	grid-template-columns: repeat(10, minmax(0, 1fr));
grid-cols-11	grid-template-columns: repeat(11, minmax(0, 1fr));
grid-cols-12	grid-template-columns: repeat(12, minmax(0, 1fr));
grid-cols-none	grid-template-columns: none;

Применение

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

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

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

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

<div class="grid grid-cols-1 md:grid-cols-6">
  <!-- ... -->
</div>

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

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

По умолчанию Tailwind включает утилиты grid-template-column для создания базовых сеток с 12 столбцами одинаковой ширины. Вы изменяете, добавляете или удаляете их, настраивая раздел gridTemplateColumns в конфигурации Вашей темы Tailwind.

Здесь у вас есть прямой доступ к CSS свойству grid-template-columns, так что вы можете сделать свои собственные значения столбцов как общие, так и сложные и зависящие от сайта, как вам нравится.

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        gridTemplateColumns: {
          // Простая сетка из 16 столбцов
+         '16': 'repeat(16, minmax(0, 1fr))',

          // Сложная конфигурация столбца для конкретного сайта
+         'footer': '200px minmax(900px, 1fr) 100px',
        }
      }
    }
  }

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

Варианты

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

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

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

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

Отключение

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

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