Grid

Grid раскладывает детей по колонкам: columns — число равных колонок или массив долей и ширин, gap — ступень шкалы зазоров легаси, minColumn — минимум ширины колонки, flex и wrap — ряд вместо сетки. Нужен потребителям, у которых раскладка не приходит документом экрана: Vue-команды и формы редакторов с колонками полей в разметке.

Статус: experimental · в системе с 2026-09 · интерактивность: none (нет)

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

Поля редактора в две-три колонки одинаковой ширины.
Ряд действий или чипов с переносом.

Не использовать:

Раскладка целого экрана — её задаёт документ 42-screen/1.
Одна колонка блоков — это Stack.

Альтернативы:

stack — вертикальная колонка с зазором
fields-group — несколько полей в одной рамке

Колонки полей

Три равные колонки с зазором m и ряд с долями [3, 1].

Название

Ставка

Лимит

Поиск

<!--
  🟢

  Колонки полей (эталон: Vue-легаси structures/grid): три равные колонки с
  зазором m и ряд с долями [3, 1] — поле и кнопка рядом.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import Button from "$lib/ui/Button.svelte";
import Grid from "$lib/ui/Grid.svelte";
import Input from "$lib/ui/Input.svelte";

let name = $state("");
let bid = $state("");
let limit = $state("");
let query = $state("");
</script>

<div style="display: flex; flex-direction: column; gap: var(--sp-3); width: 640px;">
	<Grid columns={3} gap="m">
		<Input label={t("Название")} bind:value={name} />
		<Input label={t("Ставка")} bind:value={bid} />
		<Input label={t("Лимит")} bind:value={limit} />
	</Grid>
	<Grid columns={[3, 1]} gap="s" verticalAlign="end">
		<Input label={t("Поиск")} bind:value={query} />
		<Button variant="accent">{t("Найти")}</Button>
	</Grid>
</div>