Конечное положение строки сетки

grid-row-end
sm
md
lg
xl

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

Классы

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

Описание

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

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

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

Начальное и конечное положение строки.

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

Вы можете также комбинировать модификаторы grid-row-start-{n} и grid-row-end-{n} с модификаторами grid-row-span-{n}.

Обратите внимание, что линии сетки CSS начинаются с 1, а не с 0, поэтому элемент полной высоты в сетке из 6 строк будет начинаться с 1-й позиции и заканчиваться на 7-й позиции.
1
2
3
4
<div class="grid grid-col-6 gap-1">
    <div class="col-star-top-2 col-span-4">1</div>
    <div class="col-start-1 col-end-3">2</div>
    <div class="col-end-7 col-span-2">3</div>
    <div class="col-start-1 col-end-7">4</div>
</div>

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

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

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

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

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

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