Начальное положение колонки сетки
grid-column-start
sm
md
lg
xl
В SIMAI Framework с помощью модификатора можно управлять параметрами размещения столбцов в сетке.
Классы
| Класс | Значение |
|---|---|
col-start-1 |
grid-column-start: 1; |
col-start-2 |
grid-column-start: 2; |
col-start-3 |
grid-column-start: 3; |
col-start-4 |
grid-column-start: 4; |
col-start-5 |
grid-column-start: 5; |
col-start-6 |
grid-column-start: 6; |
col-start-7 |
grid-column-start: 7; |
col-start-8 |
grid-column-start: 8; |
col-start-9 |
grid-column-start: 9; |
col-start-10 |
grid-column-start: 10; |
col-start-11 |
grid-column-start: 11; |
col-start-12 |
grid-column-start: 12; |
col-start-auto |
grid-column-start: auto; |
Описание
Адаптивный модификатор. Управляет положением и размером столбцов, в зависимости от размера области просмотра.
Использование модификатора: {контрольная точка}:{модификатор}
- Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (
sm,md,lg,xl). Если контрольная точка не задана, то действует для любого размера области просмотра. - Модификатор. Обязательный параметр. Может принимать значения:
col-start-{1...12}- элемент начинается с указанного столбца;col-start-auto- начало столца определяется автоматически.
Начальное положение столбца.
Используйте модификаторы col-start-{n}, чтобы установить начальную позицию элемента относительно столбцов сетки.
Обратите внимание, что линии сетки CSS начинаются с 1, а не с 0, поэтому элемент полной ширины в сетке из 6 столбцов будет начинаться с 1-й позиции и заканчиваться на 7-й позиции.
1
<div class="grid grid-col-6 gap-1">
<div></div>
<div class="col-span-4">1</div>
<div></div>
</div>
Адаптивность
Для установки параметров размещения столбцов, начиная с определенного размера области просмотра, добавьте к модификатору префикс контрольной точки (sm, md, lg, xl) через двоеточие (:).
Например, используйте модификатор md:col-start-4 для установки начала столбца с 4-й позиции для экранов размером Medium и больше.
<div class="md:col-start-4"></div>
Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.