К содержанию

Навигация

Главное

Содержание

Промежутки между элементами

Классы gap-*, col-gap-* и row-gap-* задают промежутки между элементами сетки или флекс-контейнера по шкале отступов: сразу по обеим осям или по одной. Берите их вместо внешних отступов у элементов: промежуток есть только между соседями и не появляется у краёв контейнера.

Пример

Шкала

Сетка из четырёх колонок в две строки. Подпись над образцом — класс контейнера.

Оси

col-gap-* задаёт промежуток между колонками, row-gap-* — между строками. Вместе с gap-* класс оси уточняет одну ось. Во флекс-контейнере с переносом промежутки работают так же.

Ширина экрана

С префиксом ширины класс действует от указанной ширины и шире. Меняйте ширину окна просмотра: промежутки растут с ширины md и ещё раз с ширины lg.

Классы

Класс CSS Значения
gap-{значение} gap: var(--sf-space-{значение}) 0, 1/4, 1/3, 1/2, 1, 2, 3, 4, 5, 6, 7, 8
g-{значение} gap: var(--sf-space-{значение}) 0, 1/4, 1/3, 1/2, 1, 2, 3, 4, 5, 6, 7, 8
col-gap-{значение} column-gap: var(--sf-space-{значение}) 0, 1/4, 1/3, 1/2, 1, 2, 3, 4, 5, 6, 7, 8
gap-x-{значение} column-gap: var(--sf-space-{значение}) 0, 1/4, 1/3, 1/2, 1, 2, 3, 4, 5, 6, 7, 8
g-x-{значение} column-gap: var(--sf-space-{значение}) 0, 1/4, 1/3, 1/2, 1, 2, 3, 4, 5, 6, 7, 8
row-gap-{значение} row-gap: var(--sf-space-{значение}) 0, 1/4, 1/3, 1/2, 1, 2, 3, 4, 5, 6, 7, 8
gap-y-{значение} row-gap: var(--sf-space-{значение}) 0, 1/4, 1/3, 1/2, 1, 2, 3, 4, 5, 6, 7, 8
g-y-{значение} row-gap: var(--sf-space-{значение}) 0, 1/4, 1/3, 1/2, 1, 2, 3, 4, 5, 6, 7, 8

Условия (что это): ширина экрана — sm:, md:, lg:, xl:, xxl:; состояния — нет. Например: sm:gap-0.

Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.

Переменные

Классы читают эти токены темы. Изменённый токен меняет все места, где он используется, — классы, компоненты и тему; задайте его в теме проекта, а не на отдельном элементе. Все токены — на странице Все токены.

Переменная Значение по умолчанию
--sf-space-0 0
--sf-space-1/4 0.25rem; от ширины lg: var(--sf-a4)
--sf-space-1/3 0.5rem; от ширины lg: var(--sf-a8)
--sf-space-1/2 0.5rem; от ширины lg: 0.75rem
--sf-space-1 var(--sf-b2); от ширины lg: var(--sf-b6)
--sf-space-2 var(--sf-b6); от ширины lg: var(--sf-c0)
--sf-space-3 var(--sf-b6); от ширины lg: var(--sf-c2)
--sf-space-4 var(--sf-c2); от ширины lg: var(--sf-c6)
--sf-space-5 var(--sf-c6); от ширины lg: var(--sf-d0)
--sf-space-6 var(--sf-c6); от ширины lg: var(--sf-d2)
--sf-space-7 var(--sf-d0); от ширины lg: var(--sf-d6)
--sf-space-8 var(--sf-d2); от ширины lg: var(--sf-e0)

В CSS косую черту в имени экранируют: var(--sf-space-1\/4).

Применение

Шкала

Ступени берут значения из токенов --sf-space-*. С ширины lg большинство ступеней крупнее.

Класс До lg От lg
gap-0 0 0
gap-1/4 4px 4px
gap-1/3 8px 8px
gap-1/2 8px 12px
gap-1 12px 16px
gap-2 16px 20px
gap-3 16px 24px
gap-4 24px 32px
gap-5 32px 40px
gap-6 32px 48px
gap-7 40px 64px
gap-8 48px 80px

Значения приведены при 1rem = 16px. До ширины lg соседние ступени 1/3 и 1/2, 2 и 3, 5 и 6 совпадают.

Общий промежуток и отдельная ось

В одном условии класс оси сильнее общего: gap-1 col-gap-6 даёт между строками ступень 1, между колонками — ступень 6, в каком бы порядке ни стояли классы. Не ставьте два класса одной оси с разными значениями, например col-gap-2 col-gap-6.

HTML
<div class="grid grid-col-3 gap-2 row-gap-4">
  <!-- колонки через ступень 2, строки через ступень 4 -->
</div>

Другие имена

  • g-* — то же, что gap-*.
  • gap-x-* и g-x-* — то же, что col-gap-*.
  • gap-y-* и g-y-* — то же, что row-gap-*.

В разметке пишите gap-*, col-gap-* и row-gap-*.

Ограничения

  • Промежуток есть только между элементами. Отступ от краёв контейнера задают классы внутреннего отступа p-*.
  • Отрицательных значений нет. Промежутки не зависят от направления письма и одинаковы при dir="rtl".
  • col-gap-* задаёт column-gap и действует также на промежуток между колонками многоколоночного текста.

См. также

Settings

Тема
Font size
Page width