search
Конечное положение колонки сетки (grid-column-end)
https://dev.ru.simai.io/ru/ui/utility/grid/grid-column-end.php
В 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— конечное положение столбца определяется автоматически.
Пример использования
<div class="grid grid-col-6 gap-1">
<div class="col-span-2 col-end-5">Элемент заканчивается на 5-й линии</div>
<div></div>
</div>
В данном примере элемент с классом col-span-2 col-end-5 занимает 2 столбца и заканчивается на 5-й линии сетки.
Обратите внимание, что линии сетки CSS начинаются с 1. Например, если нужно, чтобы элемент занимал последний столбец в
6-колоночной сетке, можно использовать col-end-7 (так как крайняя линия после 6 столбцов — это 7).
Адаптивность
Для изменения конечного положения столбца начиная с определённого размера экрана используйте префикс контрольной точки. Например:
<div class="md:col-end-4">
<!-- Начиная с размера экрана md и больше элемент будет заканчиваться на 4-й линии сетки -->
</div>