Layouts (layout.*)
Reine Anordnung — Raster, Stapel, Spalten, Reihen. Keine eigene Optik, nur Geometrie über Tokens.
| Definition | Zweck |
|---|---|
layout.stack | Vertikaler Stapel mit Token-Abstand — das Grundlayout |
layout.grid | Responsives Raster: feste Spaltenzahl (bricht mobil um) oder auto-fit nach Mindestbreite |
layout.columns | Zwei benannte Spalten mit Verhältnis (2:1 …), stapeln mobil |
layout.cluster | Horizontale Reihe mit Umbruch (Button-Reihen, Meta-Zeilen) |
Regeln: Ein default-Slot, der fast alles akzeptiert; Abstände ausschließlich über size-Tokens. layout.grid ist das Zwölf-Spalten-Raster.
Warum eine eigene Ebene? Damit Anordnung komponierbar ist, ohne dass jede Component eigene Layout-Props braucht. Ein Shop-Grid = layout.grid + N × component.card — nicht eine „CardGrid"-Spezial-Component.