home chevron_right
Сетка chevron_right
Шаблон строк сетки (grid-template-rows)

Шаблон строк сетки (grid-template-rows)link

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

Модификаторы grid-row-* задают количество строк в сетке и их базовый размер.

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

Класс Значение
.grid-row-1 … 12 grid-template-rows: repeat(n, minmax(0, 1fr));
.grid-row-none grid-template-rows: none;

Синтаксисlink

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

  • Контрольная точка (необязательный параметр): применяет модификатор начиная с указанного брейкпоинта (sm, md, lg, xl). Если не указана, действует для всех размеров.
  • Модификатор (обязательный параметр): grid-row-{n} или grid-row-none.

Примерlink

<div class="grid grid-row-3 gap-2 h-e8">
  <div class="sf-card bg-primary color-on-primary p-2">Short</div>
  <div class="sf-card bg-secondary color-on-secondary p-2">Two<br/>lines</div>
  <div class="sf-card bg-tertiary color-on-tertiary p-2">Three<br/>lines<br/>here</div>
</div>

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

<div class="grid grid-row-2 md:grid-row-4">
  <!-- 2 строки на мобильных, 4 на md и выше -->
</div>

Playgroundlink