Примитивы потока

Использование

<div class="inst-stack">
  <div>…</div>
  <div>…</div>
</div>

Когда использовать

Варианты

Стопка

<div class="inst-stack inst-stack--tight">
  <div class="inst-card"><div class="inst-card-title">Первый</div></div>
  <div class="inst-card"><div class="inst-card-title">Второй</div></div>
</div>

Кнопка, бейдж, тег и сегментированный контрол в колонке не растягиваются: кнопка во всю ширину карточки — тот же признак самодельного кита, что и иконочная кнопка прямоугольником. Поля и карточки ширину колонки, наоборот, занимают. Список закрытый и совпадает с инлайновыми компонентами кита.

Это работает во всех колонках кита — стопке, форме, филдсете, поле, секции. В своей колонке приложения — нет: display: flex; flex-direction: column, написанный руками, растянет их заново. Это довод взять примитив, а не писать колонку.

Кластер

<div class="inst-cluster inst-cluster--loose">
  <span class="inst-badge" data-tone="ok"><span class="inst-dot"></span>готово</span>
  <span class="inst-badge" data-tone="running"><span class="inst-dot"></span>идёт</span>
  <span class="inst-cluster-spacer"></span>
  <button class="inst-btn inst-btn--sm" type="button">Ещё</button>
</div>

Кластер переносится всегда (flex-wrap: wrap) и выравнивает детей по центру поперечной оси. inst-cluster-spacer — пустой элемент с margin-inline-start: auto: всё после него уезжает к дальнему краю.

Сетка

<div class="inst-grid inst-grid--wide">
  <div class="inst-card"><div class="inst-card-title">Карточка</div>
    <div class="inst-card-sub">Колонки перестраиваются сами: auto-fit, без единого запроса.</div></div>
  <div class="inst-card"><div class="inst-card-title">Карточка</div>
    <div class="inst-card-sub">min() не даёт колонке вылезти за контейнер на узком экране.</div></div>
</div>

Число колонок не задаётся: repeat(auto-fit, minmax(min(var(--col-min), 100%), 1fr)) считает его сам. min(…, 100%) обязателен — без него колонка шириной 380px не помещается в контейнер шириной 320px и вылезает наружу вместе с горизонтальной прокруткой.

Это первый уровень адаптивности, интринсик: работает всегда, в том числе там, где контейнера-предка нет.

/* Своя плотность сетки — одна строка */
.my-board { --col-min: 320px; }

Правила

Почему здесь нет mt-3 и p-2

Утилит отступов в ките нет и не будет, и это не эстетика.

Шкала кита нарочно разрежена сверху: между соседними шагами разрыв растёт, чтобы «чуть побольше» не было доступным решением. Набор из двухсот утилит возвращает его первым классом — и вместе с ним переносит решение о вертикальном ритме из кита в разметку каждого экрана. Через полгода одинаковые на вид экраны отличаются на два пикселя в тридцати местах, и починить это можно только поштучно.

Вместо утилит — три примитива с тремя шагами зазора, названными намерением. Плотность перенастраивает все три разом, потому что зазор приходит из ролей (--pad-panel, --gap-row, --gap-inline), а не из числа в разметке. Полное рассуждение — в конституции.

Доступность

API

Связанное

Контейнер Сплит Секция Шапка экрана Плотность Ритм и форма