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