Version: latest

Server Component

Grid is best rendered on the server. Use the standard import (e.g. @prokodo/ui/grid) — the library detects the runtime automatically.

Grid

Grid renders a responsive CSS grid container. Column count and gap are configurable per breakpoint, making it easy to build multi-column page sections.

Live demo →

Overview

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	Type	Default	Required	Description
`children`	`ReactNode`	—	✅	Grid cell contents.
`columns`	`GridColumns`	`2`	—	Number of grid columns.
`gap`	`"none" \| "xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`	—	Gap between cells.
`rowHeight`	`string \| number`	—	—	Fixed row height.
`className`	`string`	—	—	CSS class on root element.

See src/components/grid/Grid.model.ts for the full GridProps type.

Design Tokens

Customise via CSS custom properties on :root or a scoped ancestor element.

Token	Default	Description
`--pk-grid-padding`	`var(--pk-space-lg)`	Inner padding of the grid container

WCAG 2.2 Status

Criterion	Name	Status	Note
1.3.1	Info and Relationships (A)	✅ Fulfilled	Semantic structure (headings, lists, labels, landmarks) must be conveyed programmatically via HTML or ARIA.
1.3.2	Meaningful Sequence (A)	🔍 Manual review	Content reading order in the DOM must match the intended visual presentation order.
1.4.4	Resize Text (AA)	🔍 Manual review	Text must remain readable and functional when scaled to 200% without assistive technology.

Test coverage: 2 jest-axe assertion(s) across 1 test file(s) · 0 ARIA attribute occurrence(s) in source scan. Criteria marked 🔍 require manual verification in the final product integration and theme context.

Storybook

👉 Open Grid in Storybook

Source

src/components/grid/Grid.model.ts