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

grid-row-start
sm
md
lg
xl

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

Классы

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

Описание

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

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

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

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

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

Обратите внимание, что линии сетки CSS начинаются с 1, а не с 0, поэтому элемент полной высоты в сетке из 6 строк будет начинаться с 1-й позиции и заканчиваться на 7-й позиции.
1
2
3
4
<div class="grid grid-col-6 gap-1">
    <div class="grid-row-start-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:grid-row-start-2 для установки начала строки с 2-й позиции для экранов размером Medium и больше.

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

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

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