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

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

В SIMAI Framework с помощью модификаторов можно управлять параметрами размещения строк в сетке, задавая элементам размер и положение относительно строк сетки.

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

Класс Значение
.row-auto grid-row: auto;
.row-span-1 grid-row: span 1 / span 1;
.row-span-2 grid-row: span 2 / span 2;
.row-span-3 grid-row: span 3 / span 3;
.row-span-4 grid-row: span 4 / span 4;
.row-span-5 grid-row: span 5 / span 5;
.row-span-6 grid-row: span 6 / span 6;
.row-span-full grid-row: 1/-1;

Синтаксисlink

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

  • Контрольная точка (необязательный параметр):
    Применяет модификатор начиная с определенного размера экрана (sm, md, lg, xl).
    Если не указана, модификатор применяется для всех размеров.

  • Модификатор (обязательный параметр):

    • row-auto — размер строки определяется автоматически.
    • row-span-{n} (где n от 1 до 6) — элемент занимает указанное количество строк.
    • row-span-full — элемент занимает все доступные строки сетки.

Пример использованияlink

<div class="grid grid-row-3 gap-1 grid-flow-col">
    <div class="row-auto">1</div>
    <div class="row-span-2">2</div>
    <div class="row-span-full">3</div>
</div>

В данном примере:

  • Элемент с классом row-auto занимает одну строку, размер определяется автоматически.
  • Элемент с классом row-span-2 занимает 2 строки.
  • Элемент с классом row-span-full занимает все строки сетки (в данном случае все 3 строки).

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

Для изменения параметров размещения строк, начиная с определенного размера экрана, добавьте контрольную точку. Например:

<div class="md:row-span-4">
    <!-- Начиная с md и больше элемент будет занимать 4 строки -->
</div>