Grid

Setup

import { Grid } from '@fragments-sdk/ui';

Loading preview...

Prop	Type	Default	Description
`children`	`node`	Not set	Grid items and content
`columns`	`union`	`1`	Number of columns: a number (1-12), a responsive object { base, sm, md, lg, xl }, or "auto" for auto-fill
`minChildWidth`	`string`	Not set	Minimum width for auto-fill columns (e.g., "16rem", "250px")
`gap`	`unionnonexssmmdlgxl`	`md`	Gap between grid items. Accepts string tokens or numbers (1-8) mapped to the spacing scale
`alignItems`	`enumstartcenterendstretch`	Not set	Vertical alignment of items within their cells
`justifyItems`	`enumstartcenterendstretch`	Not set	Horizontal alignment of items within their cells
`padding`	`enumnonesmmdlg`	`none`	Internal padding of the grid container
`className`	`string`	Not set	Additional class name
`style`	`object`	Not set	Inline styles

Use columns="auto" with minChildWidth for grids that adapt without breakpoints
Use responsive object { base: 1, md: 2, lg: 3 } when you need explicit control per breakpoint
Use fixed column counts when exact column control is needed and responsiveness is not required
Use Grid.Item with colSpan to create asymmetric layouts within a fixed grid
Keep gap consistent within a context — md is the default and works for most cases
Pass DOM attributes (id, role, aria-*, data-*, event handlers) directly to Grid and Grid.Item roots when needed

Accessibility