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

Контракт

Доступность

Варианты

Стопка

<div class="inst-stack inst-stack--loose">
  <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>
  <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>
</div>

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

Колонка не знает, кто внутри неё: она объявляет намерение своим прямым детям, а читает его тот, кого оно касается. Компонент, который меряется содержимым, несёт align-self: var(--flow-self, center) в собственном правиле — рядом со своим display: inline-flex. Поэтому «я меряюсь содержимым» остаётся свойством компонента, а не списком чужих имён в раскладке.

Запасное значение center объясняет, почему в ряду ничего не меняется: там намерение не объявлено, и компонент центрируется, как и должен.

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

.моя-колонка > * { --flow-self: start; }

Кластер

<div class="inst-cluster inst-cluster--loose">
  <span class="inst-cluster inst-cluster--tight">
    <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>
  <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; }

API

Связанное

КонтейнерСплит