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