Server-Komponente

Grid wird bevorzugt auf dem Server gerendert. Nutze den Standard-Import (z. B. @prokodo/ui/grid) — die Library erkennt die Umgebung automatisch.

Grid

Grid rendert ein responsives Rasterlayout zur strukturierten Platzierung von Inhalten über verschiedene Breakpoints hinweg.

---

Übersicht

import { Grid } from "@prokodo/ui/grid"
;<Grid cols={3} gap="lg">
  <Card>Item 1</Card>
  <Card>Item 2</Card>
  <Card>Item 3</Card>
</Grid>

Live PreviewOpen in Storybook ↗

---

Import

import { Grid } from "@prokodo/ui/grid"

CSS:

import "@prokodo/ui/grid.css"

---

Props

Prop	Typ	Standard	Pflicht	Beschreibung
children	ReactNode	—	✅	Grid cell content.
cols	number | GridCols	1	—	Column count or responsive breakpoint map.
gap	"xs" | "sm" | "md" | "lg" | "xl"	"md"	—	Grid gap using design-token spacing.
align	"start" | "center" | "end" | "stretch"	"stretch"	—	Vertical alignment of child cells.
className	string	—	—	CSS-Klasse am Root-Element.

Siehe src/components/grid/Grid.model.ts für den vollständigen GridProps-Typ.

---

Design-Tokens

Anpassungen über CSS-Custom-Properties auf :root oder einem eingeschränkten Vorfahren-Element.

Token	Standard	Beschreibung
--pk-grid-padding	var(--pk-space-lg)	Innenabstand des Grid-Containers

---

WCAG-2.2-Status

Kriterium	Bezeichnung	Status	Hinweis
1.3.1	Info und Beziehungen (A)	✅ Erfüllt	Semantische Struktur (Überschriften, Listen, Labels, Landmarks) muss programmatisch via HTML oder ARIA vermittelt werden.
1.3.2	Bedeutungsvolle Reihenfolge (A)	🔍 Manuell prüfen	Die Lesereihenfolge im DOM muss der beabsichtigten visuellen Darstellungsreihenfolge entsprechen.
1.4.4	Textgröße ändern (AA)	🔍 Manuell prüfen	Text muss bei 200 % Zoom ohne Hilfsmittel lesbar und nutzbar bleiben.

Testabdeckung: 2 jest-axe-Assertion(s) in 1 Testdatei(en) · 0 ARIA-Attribut-Vorkommen im Quellcode-Scan. Kriterien mit 🔍 erfordern manuelle Prüfung im finalen Integrations- und Theme-Kontext.

Storybook

👉 Grid in Storybook öffnen

---

Quellcode

src/components/grid/Grid.model.ts