Grid

Ohne columns passt ein Grid so viele Spuren von mindestens min ein, wie der Platz erlaubt, und jede teilt sich den Rest gleichmäßig. Genau das will eine Kartenliste, und es braucht keine Breakpoints: ändere die Größe dieser Seite, und die Demos unten ordnen sich von selbst neu.

Auto-Fit

Der Standard. Spuren sind mindestens 16rem breit.

Routing

Daten laden

Assets

Bilder

Islands

Suche

grid(
  ...['Routing', 'Daten laden', 'Assets', 'Bilder', 'Islands', 'Suche'].map((name) =>
    card({ variant: 'flat' }, cardBody(text({ variant: 'small' }, name))),
  ),
)

Spurbreite

min legt fest, wie schmal eine Spur werden darf, bevor das Raster auf weniger Spalten geht. Kleiner heißt mehr Spalten.

2xl

3xl

4xl

5xl

grid({ min: '9rem' },
  ...['sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'].map((name) =>
    card({ variant: 'flat' }, cardBody(text({ variant: 'small', align: 'center' }, name))),
  ),
)

Eine feste Spaltenzahl

Übergib eine Zahl, wenn die Anzahl sich nicht mit dem Viewport ändern soll. Jede Spur bekommt einen gleichen Anteil.

Eins

Zwei

Drei

grid({ columns: 3 },
  ...['Eins', 'Zwei', 'Drei'].map((name) =>
    card({ variant: 'flat' }, cardBody(text({ variant: 'small', align: 'center' }, name))),
  ),
)

Eine eigene Vorlage

Ein String wird unverändert als grid-template-columns durchgereicht — für eine Aufteilung aus Seitenleiste und Inhalt oder alles andere, was CSS Grid ausdrücken kann.

Seitenleiste

Inhalt, der den Rest der Reihe nimmt.

grid({ columns: '12rem 1fr', gap: 'lg' },
  card({ variant: 'flat' }, cardBody(text({ variant: 'small' }, 'Seitenleiste'))),
  card({ variant: 'flat' }, cardBody(text({ variant: 'small' }, 'Inhalt, der den Rest der Reihe nimmt.'))),
)

Abstand und Ausrichtung

Kurz

Eine höhere Karte mit zwei Textzeilen, um zu zeigen, was align mit ihren kürzeren Nachbarn macht.

Kurz

grid({ min: '10rem', gap: 'xl', align: 'center' },
  card({ variant: 'flat' }, cardBody(text({ variant: 'small' }, 'Kurz'))),
  card({ variant: 'flat' }, cardBody(text({ variant: 'small' }, 'Eine höhere Karte mit zwei Textzeilen, um zu zeigen, was align mit ihren kürzeren Nachbarn macht.'))),
  card({ variant: 'flat' }, cardBody(text({ variant: 'small' }, 'Kurz'))),
)

Props

Prop	Typ	Standard	Beschreibung
`columns`	`number \| string`	—	Eine feste Spurenzahl oder ein roher grid-template-columns-Wert. Weglassen für Auto-Fit.
`min`	`string`	`'16rem'`	Mindestbreite einer Spur beim Auto-Fit.
`gap`	`Space`	`'md'`	Abstand zwischen Spuren und Zeilen.
`align`	`string`	`'stretch'`	Jeder align-items-Wert.
`as`	`string`	`'div'`	Element, das gerendert wird.

Eine Spur wird nie breiter als das Raster selbst, auch wenn min größer ist als der verfügbare Platz — ein Minimum von 16rem erzeugt auf einem 320px-Telefon also keine horizontale Scrollleiste.