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

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

Класс	Свойства
grid-rows-1	grid-template-rows: repeat(1, minmax(0, 1fr));
grid-rows-2	grid-template-rows: repeat(2, minmax(0, 1fr));
grid-rows-3	grid-template-rows: repeat(3, minmax(0, 1fr));
grid-rows-4	grid-template-rows: repeat(4, minmax(0, 1fr));
grid-rows-5	grid-template-rows: repeat(5, minmax(0, 1fr));
grid-rows-6	grid-template-rows: repeat(6, minmax(0, 1fr));
grid-rows-none	grid-template-rows: none;

Применение

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

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

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

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

<div class="grid grid-rows-2 md:grid-rows-6 ...">
  <!-- ... -->
</div>

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

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

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

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

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        gridTemplateRows: {
          // Простая 8-рядная сетка
+         '8': 'repeat(8, minmax(0, 1fr))',

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

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

Варианты

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

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

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

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

Отключение

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

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