Размер строки сетки (grid-row)link

https://dev.ru.simai.io/ru/ui/utility/grid/grid-row.php

Модификаторы grid-row управляют высотой и позиционированием элементов по вертикали в grid-сетке.

Таблица классовlink

Класс	Значение
.row-span-{n}	grid-row: span {n};
.row-span-full	grid-row: 1 / -1;
.row-span-none	grid-row: auto;
.row-start-{n}	grid-row-start: {n};
.row-start-auto	grid-row-start: auto;
.row-end-{n}	grid-row-end: {n};
.row-end-auto	grid-row-end: auto;

Диапазон n соответствует утилитам в SCSS (row-span от 1 до 6, row-start/row-end от 1 до 7).

Синтаксисlink

Использование: {контрольная точка}:{модификатор} или просто {модификатор}

Контрольная точка (необязательный параметр): применяет модификатор начиная с указанного брейкпоинта (sm, md, lg, xl). Без указания действует везде.
Модификатор (обязательный параметр): указывает нужный row-span, row-start или row-end.

Примерыlink

Spanlink

<div class="grid grid-col-3 gap-2">
  <div class="sf-card bg-primary color-on-primary p-2 row-span-2">row span 2</div>
  <div class="sf-card bg-secondary color-on-secondary p-2">row span 1</div>
  <div class="sf-card bg-tertiary color-on-tertiary p-2">row span 1</div>
</div>

Start / Endlink

<div class="grid grid-col-3 grid-row-4 gap-2">
  <div class="sf-card bg-success color-on-success p-2 row-start-2 row-end-4">start 2 / end 4</div>
</div>

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

<div class="row-span-2 md:row-span-3">
  <!-- Высота строки увеличится на брейкпоинте md -->
</div>