home chevron_right
Разрыв макета

Межколоночный интервал (column-gap)link

column-gapsmmdlgxl

Модификатор col-gap-* задаёт расстояние между колонками в многоколоночном макете (layout-col-*). Используются те же размерные токены, что и для отступов (--sf-space-*).

Таблица классовlink

Класс Значение
.col-gap-{n} column-gap: var(--sf-space-{n});

Где {n} ∈ 0, 1/4, 1/3, 1/2, 1, 2, 3, 4, 5, 6, 7, 8.

Синтаксисlink

Использование: {контрольная точка}:{модификатор} или просто {модификатор}.

  • Контрольная точка (необязательный параметр): sm, md, lg, xl — применяет модификатор начиная с указанного брейкпоинта.
  • Модификатор (обязательный параметр): col-gap-{n}.

Примечание: брейкпоинтные префиксы работают так же, как у утилиты gap (sm:col-gap-2, md:col-gap-4 и т.д.).

Примерlink

<div class="layout-col-3 col-gap-2">
  <div class="sf-card surface p-3 radius-2">1</div>
  <div class="sf-card surface p-3 radius-2">2</div>
  <div class="sf-card surface p-3 radius-2">3</div>
</div>

Playgroundlink