Das Raster (12 Spalten)
Alles, was nebeneinander steht, steht im Raster — zwölf Spalten, weil sich zwölf durch 2, 3, 4 und 6 teilen lässt.
Zwei Wege hinein — je nachdem, woher die Kinder kommen
| Fall | Weg | Beispiel |
|---|---|---|
| Kinder sind Knoten | layout.grid mit layout.span am Kind — der Renderer legt die Zellen-Hülle selbst um jedes Kind | Templates, Knoten-Kompositionen |
| Kinder kommen aus Daten | Die Section schreibt die Klassen selbst ins Markup: invisible-grid am Behälter, invisible-col--md-span-N an der Kachel | section.footer, section.product-grid |
Der zweite Fall ist die Mehrheit: nur 2 der 26 Sections haben Slots — die übrigen erzeugen ihre Kinder aus Array-Props. Ein Produktraster mit vierzig Produkten sollte auch keine vierzig Knoten im Seitenbaum sein. Beide Wege enden im selben CSS, deshalb wirken Theme und Umbruchpunkte identisch.
Die Breite steht am Kind
{ "definition": "section.hero",
"layout": { "span": { "base": 12, "md": 8 } } }
→ <div class="invisible-col invisible-col--span-12 invisible-col--md-span-8">
Ob per PHP (Tür 1) oder im Surface-JSON (Tür 2): die Breite steht als DATUM am Kind, das Raster legt die Zellen-Hülle. Damit ist ein Hauptbereich über zwei Drittel plus Seitenspalte ausdrückbar. Vorher war er es nicht: columns machte alle Kinder gleich breit — der Grund, warum bis zum 08.08.2026 keine einzige der 25 Sections ein Layout benutzte.
| Angabe | Bedeutung |
|---|---|
span | Breite in Zwölfteln (1–12), skalar oder je Umbruchpunkt |
start | Startspalte (1–12) — für Versätze und Lücken |
columns (am Raster) | 1, 2, 3, 4, 6, 12 — Vorgabe für Kinder ohne eigene Angabe; dazu auto und fill |
gap (am Raster) | none, sm, md, lg, xl — aus size-Tokens |
Ohne jede Angabe füllt ein Kind die Zeile. Damit ist „stapelt auf dem Telefon, N Spalten ab md" der Nullaufwand-Fall.
Das Kind weiß nichts vom Raster
Die Klassen landen auf einer Hülle, die der Renderer um das Kind legt — nicht am Wurzelelement des Bausteins. Ein ui.button bleibt ein Button und muss nicht wissen, dass er gerade in einem Raster steht. Layouts ordnen an, Bausteine stellen dar. Die Hülle entsteht nur, wenn der Elternteil ein Raster ist (\"grid\": true im Manifest); eine layout-Angabe außerhalb eines Rasters erzeugt eine Warnung statt stiller Wirkungslosigkeit — sonst sucht man den Fehler am falschen Ende.
Ohne Angabe gilt die Vorgabe: ein Kind ohne layout fällt in die Breite des columns-Props (columns=\"3\" heißt „jedes Kind vier Zwölftel") — deshalb war die Raster-Umstellung rückwärtskompatibel, bestehende Seiten sehen unverändert aus.
Fluide Spaltenzahl — nicht in Zwölfteln
| Klasse | Verhalten | Wofür |
|---|---|---|
--cols-auto | auto-fit: übrige Spuren werden von den vorhandenen Kacheln aufgesogen | Zahlen, Zitate, Merkmale |
--cols-fill | auto-fill: leere Spuren bleiben stehen | Produktkarten — drei Produkte sollen drei normale Karten sein |
--min-sm|md|lg | Mindestbreite einer Kachel | der einzige Regler; bewusst ohne Umbruchpunkt-Varianten — wie schmal eine Kachel sein darf, hängt an ihrem Inhalt, nicht am Gerät |
Die Rinne ist gedeckelt, der Zeilenabstand nicht
Zwölf Spalten haben elf Rinnen. Bei 40 px sind das 440 px — breiter als ein Telefon. Gemessen am 08.08.2026: 440 px Kind in einem 375 px breiten Fenster, 89 px Überlauf. Deshalb ist die Rinne höchstens 6 % der Breite (column-gap: min(var(--grid-gap), 6%)). Auf großen Schirmen greift der Deckel nie, auf kleinen genau dann, wenn es sonst bräche. Der Zeilenabstand bleibt ungedeckelt.
Nachgemessen wird im Browser
npm run audit:grid öffnet alle Definitionen bei 375 / 768 / 1280 px und vergleicht die vom Browser aufgelöste grid-column mit dem, was die Klassen versprechen. Schnappschuss-Tests vergleichen nur Markup — sie sehen, dass --md-span-7 dasteht, aber nicht, ob daraus sieben Zwölftel werden. Genau in dieser Lücke wäre die Raster-Umstellung sonst durchgerutscht: die Kachel feature-bento --wide stand auf md:col-span-2 — im alten Drei-Spuren-Raster zwei Drittel, im Zwölfer wären es zwei Zwölftel gewesen. Dieselbe Zahl, ein Viertel der Breite, alle Schnappschüsse grün.
Nicht gemessen wird die Zellbreite: eine Zelle darf schmaler sein als ihr Feld (max-width, justify-self) — die Markenspalte im Fußzeilen-Baustein ist genau so ein Fall.
Die 120 Zellen-Klassen (12 Spannweiten + 12 Startspalten, je base/sm/md/lg/xl) entstehen im Bau aus den breakpoint-Tokens und landen in tokens.css — dem einzigen Stylesheet, das überall geladen wird.