Размер строк сетки

grid-row
sm
md
lg
xl

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

Классы

Класс Значение
row-auto grid-row: auto;
grid-row-span-1 grid-row: span 1 / span 1;
grid-row-span-2 grid-row: span 2 / span 2;
grid-row-span-3 grid-row: span 3 / span 3;
grid-row-span-4 grid-row: span 4 / span 4;
grid-row-span-5 grid-row: span 5 / span 5;
grid-row-span-6 grid-row: span 6 / span 6;
grid-row-span-7 grid-row: span 7 / span 7;
grid-row-span-8 grid-row: span 8 / span 8;
grid-row-span-9 grid-row: span 9 / span 9;
grid-row-span-10 grid-row: span 10 / span 10;
grid-row-span-11 grid-row: span 11 / span 11;
grid-row-span-12 grid-row: span 12 / span 12;
grid-row-span-full grid-row: 1 / -1;

Описание

Адаптивный модификатор. Управляет положением размером строк, в зависимости от размера области просмотра.

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

  • Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (sm, md, lg, xl). Если контрольная точка не задана, то действует для любого размера области просмотра.
  • Модификатор. Обязательный параметр. Может принимать значения:
    • row-auto - размер элемента определяется автоматически (по умолчанию равно 1) относительно строк;
    • grid-row-span-{1...12} - размер элемента устанавливается в указанное количество строк;
    • grid-row-span-full - элемент принимает размер всех строк сетки;

Размер элемента относительно строк

Используйте модификатор grid-row-span-{n}, чтобы установить ширину элемента относительно строк сетки.

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

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

Для установки параметров размещения строк, начиная с определенного размера области просмотра, добавьте к модификатору префикс контрольной точки (sm, md, lg, xl) через двоеточие (:).

Например, используйте модификатор md:grid-row-2 для установки стобцов в две строки для экранов размером Medium и больше.

<div class="md:grid-row-2"></div>

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

Изменить статью