Шаблон строк сетки

grid-template-rows
sm
md
lg
xl

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

Классы

Класс Значение
grid-row-1 grid-template-rows: repeat(1, minmax(0, 1fr));
grid-row-2 grid-template-rows: repeat(2, minmax(0, 1fr));
grid-row-3 grid-template-rows: repeat(3, minmax(0, 1fr));
grid-row-4 grid-template-rows: repeat(4, minmax(0, 1fr));
grid-row-5 grid-template-rows: repeat(5, minmax(0, 1fr));
grid-row-6 grid-template-rows: repeat(6, minmax(0, 1fr));
grid-row-none grid-template-rows: none;

Описание

Адаптивный модификатор. Позволяет создать сетку с определенным количеством строк, равными по высоте, в зависимости от размера области просмотра.

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

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

Пример

1
2
3
4
5
6
7
8
9
<div class="grid grid-row-3 gap-1 grid-flow-col">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</div>

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

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

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

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

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

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