Промежутки между элементами
gap
sm
md
lg
xl
В SIMAI Framework с помощью адаптивных размеров можно задать промежутки для элементов сетки и флексбокса.
Классы
| Класс | Значение |
|---|---|
g-0 |
gap: var(--sf-space--size-0); |
gap-x-0 |
column-gap: var(--sf-space--size-0); |
gap-y-0 |
row-gap: var(--sf-space--size-0); |
g-1 |
gap: var(--sf-space--size-1); |
gap-x-1 |
column-gap: var(--sf-space--size-1); |
gap-y-1 |
row-gap: var(--sf-space--size-1); |
g-2 |
gap: var(--sf-space--size-2); |
gap-x-2 |
column-gap: var(--sf-space--size-2); |
gap-y-2 |
row-gap: var(--sf-space--size-2); |
g-3 |
gap: var(--sf-space--size-3); |
gap-x-3 |
column-gap: var(--sf-space--size-3); |
gap-y-3 |
row-gap: var(--sf-space--size-3); |
g-4 |
gap: var(--sf-space--size-4); |
gap-x-4 |
column-gap: var(--sf-space--size-4); |
gap-y-4 |
row-gap: var(--sf-space--size-4); |
g-5 |
gap: var(--sf-space--size-5); |
gap-x-5 |
column-gap: var(--sf-space--size-5); |
gap-y-5 |
row-gap: var(--sf-space--size-5); |
g-6 |
gap: var(--sf-space--size-6); |
gap-x-6 |
column-gap: var(--sf-space--size-6); |
gap-y-6 |
row-gap: var(--sf-space--size-6); |
g-7 |
gap: var(--sf-space--size-7); |
gap-x-7 |
column-gap: var(--sf-space--size-7); |
gap-y-7 |
row-gap: var(--sf-space--size-7); |
g-8 |
gap: var(--sf-space--size-8); |
gap-x-8 |
column-gap: var(--sf-space--size-8); |
gap-y-8 |
row-gap: var(--sf-space--size-8); |
g-9 |
gap: var(--sf-space--size-9); |
gap-x-9 |
column-gap: var(--sf-space--size-9); |
gap-y-9 |
row-gap: var(--sf-space--size-9); |
Описание
Адаптивный модификатор. Изменяет внутренний отступ в зависимости от размера области просмотра.
Использование модификатора: {контрольная точка}:g{сторона}-{значение}
- Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (
sm,md,lg,xl). Если контрольная точка не задана, то действует для любого размера области просмотра. - Сторона. Необязательный параметр. Может принимать значения:
x- по-горизонтали;y- по-вертикали.
- Значение. Обязательный параметр. Может принимать значения:
1...9- для высоты используются адаптивные размеры отступов;0- отступ равен нулю.
Равносторонний отступ
С помощью модификатора gap-{0...9} можно задать равносторонний отступ.
<div class="grid grid-col-2 gap-1">
<div class="h-d1 radius-1/3 text-center bg-primary"></div>
<div class="h-d1 radius-1/3 text-center bg-primary"></div>
<div class="h-d1 radius-1/3 text-center bg-primary"></div>
<div class="h-d1 radius-1/3 text-center bg-primary"></div>
</div>
Отступ по горизонтали и вертикали
С помощью модификатора gap-{x|y}-{0...9} можно задать отступ по горизонтали или вертикали.
<div class="grid grid-col-2 gap-y-3 gap-x-6">
<div class="h-d1 radius-1/3 text-center bg-primary"></div>
<div class="h-d1 radius-1/3 text-center bg-primary"></div>
<div class="h-d1 radius-1/3 text-center bg-primary"></div>
<div class="h-d1 radius-1/3 text-center bg-primary"></div>
</div>
Адаптивность
Для установки промежутка, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к любому модификатору промежутка.
Например, используйте модификатор md:gap-4 для установки 8-го промежутка для экранов размером Medium и больше.
<div class="md:gap-4"></div>
Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.