1. Flexbox и Grid
  2. grid-template-rows

Flexbox и Grid

grid-template-rows

Утилиты для указания строк в макете сетки.

ClassStyles
grid-rows-<number>
grid-template-rows: repeat(<number>, minmax(0, 1fr));
grid-rows-none
grid-template-rows: none;
grid-rows-subgrid
grid-template-rows: subgrid;
grid-rows-[<value>]
grid-template-rows: <value>;
grid-rows-(<custom-property>)
grid-template-rows: var(<custom-property>);

Примеры

Указание строк сетки

Используйте утилиты grid-rows-<number> типа grid-rows-2 и grid-rows-4 для создания сеток с n строками одинакового размера:

01
02
03
04
05
06
07
08
09
<div class="grid grid-flow-col grid-rows-4 gap-4">  <div>01</div>  <!-- ... -->  <div>09</div></div>

Реализация подсетки

Используйте утилиту grid-rows-subgrid для принятия треков строк, определенных родителем элемента:

01
02
03
04
05
06
07
08
09
10
<div class="grid grid-flow-col grid-rows-4 gap-4">  <div>01</div>  <!-- ... -->  <div>05</div>  <div class="row-span-3 grid grid-rows-subgrid gap-4">    <div class="row-start-2">06</div>  </div>  <div>07</div>  <!-- ... -->  <div>10</div></div>

Использование пользовательского значения

Используйте синтаксис grid-rows-[<value>] , чтобы задать rows на основе полностью пользовательского значения:

<div class="grid-rows-[200px_minmax(900px,1fr)_100px] ...">  <!-- ... --></div>

Для переменных CSS вы также можете использовать синтаксис: grid-rows-(<custom-property>)

<div class="grid-rows-(--my-grid-rows) ...">  <!-- ... --></div>

Это просто сокращение, grid-rows-[var(<custom-property>)] которое автоматически добавляет функцию var().

Адаптивный дизайн

Префикс a grid-template-rows утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:

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

Подробнее об использовании вариантов читайте в документации по вариантам.

Авторские права © 2025 Tailwind Labs Inc.·Политика в отношении товарных знаков