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

Flexbox и Grid

grid-auto-rows

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

ClassStyles
auto-rows-auto
grid-auto-rows: auto;
auto-rows-min
grid-auto-rows: min-content;
auto-rows-max
grid-auto-rows: max-content;
auto-rows-fr
grid-auto-rows: minmax(0, 1fr);
auto-rows-(<custom-property>)
grid-auto-rows: var(<custom-property>);
auto-rows-[<value>]
grid-auto-rows: <value>;

Примеры

Базовый пример

Используйте утилиты типа auto-rows-min и auto-rows-max для управления размером неявно созданных строк сетки:

<div class="grid grid-flow-row auto-rows-max">  <div>01</div>  <div>02</div>  <div>03</div></div>

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

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

<div class="auto-rows-[minmax(0,2fr)] ...">  <!-- ... --></div>

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

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

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

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

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

<div class="grid grid-flow-row auto-rows-max md:auto-rows-min ...">  <!-- ... --></div>

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

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