Автоматический размер строк сетки

Классы auto-rows-* задают grid-auto-rows — высоту строк, которых нет в шаблоне и которые сетка создаёт по мере того, как добавляются элементы. Берите их, когда строки сетки должны быть одной высоты или не растягиваться на высоту контейнера.

Пример

Высота строк

Сетка из трёх колонок на блоке заданной высоты; во втором элементе две строки текста. Подпись над образцом — класс контейнера.

HTML

<div class="grid grid-col-1 sm:grid-col-2 gap-4 color-on-surface">
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">auto-rows</code>
    <div class="grid grid-col-3 auto-rows gap-1 h-f0 p-1 border border-dashed border-outline radius-ui">
      <span class="p-1 bg-primary-container color-on-primary-container radius-ui">1</span>
      <span class="p-1 bg-tertiary-container color-on-tertiary-container radius-ui">2<br>в две строки</span>
      <span class="p-1 bg-primary-container color-on-primary-container radius-ui">3</span>
      <span class="p-1 bg-tertiary-container color-on-tertiary-container radius-ui">4</span>
      <span class="p-1 bg-primary-container color-on-primary-container radius-ui">5</span>
      <span class="p-1 bg-tertiary-container color-on-tertiary-container radius-ui">6</span>
    </div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">auto-rows-min</code>
    <div class="grid grid-col-3 auto-rows-min gap-1 h-f0 p-1 border border-dashed border-outline radius-ui">
      <span class="p-1 bg-primary-container color-on-primary-container radius-ui">1</span>
      <span class="p-1 bg-tertiary-container color-on-tertiary-container radius-ui">2<br>в две строки</span>
      <span class="p-1 bg-primary-container color-on-primary-container radius-ui">3</span>
      <span class="p-1 bg-tertiary-container color-on-tertiary-container radius-ui">4</span>
      <span class="p-1 bg-primary-container color-on-primary-container radius-ui">5</span>
      <span class="p-1 bg-tertiary-container color-on-tertiary-container radius-ui">6</span>
    </div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">auto-rows-max</code>
    <div class="grid grid-col-3 auto-rows-max gap-1 h-f0 p-1 border border-dashed border-outline radius-ui">
      <span class="p-1 bg-primary-container color-on-primary-container radius-ui">1</span>
      <span class="p-1 bg-tertiary-container color-on-tertiary-container radius-ui">2<br>в две строки</span>
      <span class="p-1 bg-primary-container color-on-primary-container radius-ui">3</span>
      <span class="p-1 bg-tertiary-container color-on-tertiary-container radius-ui">4</span>
      <span class="p-1 bg-primary-container color-on-primary-container radius-ui">5</span>
      <span class="p-1 bg-tertiary-container color-on-tertiary-container radius-ui">6</span>
    </div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">auto-rows-fr</code>
    <div class="grid grid-col-3 auto-rows-fr gap-1 h-f0 p-1 border border-dashed border-outline radius-ui">
      <span class="p-1 bg-primary-container color-on-primary-container radius-ui">1</span>
      <span class="p-1 bg-tertiary-container color-on-tertiary-container radius-ui">2<br>в две строки</span>
      <span class="p-1 bg-primary-container color-on-primary-container radius-ui">3</span>
      <span class="p-1 bg-tertiary-container color-on-tertiary-container radius-ui">4</span>
      <span class="p-1 bg-primary-container color-on-primary-container radius-ui">5</span>
      <span class="p-1 bg-tertiary-container color-on-tertiary-container radius-ui">6</span>
    </div>
  </div>
</div>

Классы

Класс	CSS	Значения
`auto-rows`	`grid-auto-rows: auto`	—
`auto-rows-min`	`grid-auto-rows: -webkit-min-content; grid-auto-rows: min-content`	—
`auto-rows-max`	`grid-auto-rows: -webkit-max-content; grid-auto-rows: max-content`	—
`auto-rows-fr`	`grid-auto-rows: minmax(0, 1fr)`	—

Условия (что это): ширина экрана — sm:, md:, lg:, xl:, xxl:; состояния — нет. Например: sm:auto-rows.

Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.

Применение

Как выбрать

auto-rows — по содержимому, а свободная высота контейнера делится между строками. Это значение по умолчанию.
auto-rows-min и auto-rows-max — по содержимому без растягивания; свободная высота остаётся внизу.
auto-rows-fr — строки равной высоты: самая высокая задаёт высоту всем.

Карточки равной высоты

HTML

<div class="grid grid-col-1 md:grid-col-3 auto-rows-fr gap-2">
  <article>Короткая карточка</article>
  <article>Карточка с длинным описанием в несколько строк</article>
  <article>Карточка</article>
</div>

Ограничения

Классы действуют только на строки вне шаблона grid-row-*.

Навигация

Главное

Документация

Содержание