API and Development
Grid wraps Radix UI Themes Grid with design-token backgrounds, borders, elevation, and useSpacing for margin, padding, and gap. It extends BoxProps (minus flex-only props) with columns, rows, areas, flow (GridFlow), align (GridAlign), justify (GridJustify), display (GridDisplay), and useContainerQueries for responsive column templates tied to container width.
| Name | Type | Default | Description |
|---|---|---|---|
columns | Radix columns | responsive | — | Track template or counts. |
rows | string | — | Row template. |
flow | GridFlow | — | Auto-placement flow. |
align | GridAlign | — | Align items. |
justify | GridJustify | — | Justify content. |
gap | Spacing | — | Gap spacing scale. |
useContainerQueries | boolean | false | Container-based breakpoints. |
GridProps in @prepared911/ui for the full surface (background, border, attach*, overflow, zIndex, etc.).
The previews below mirror the Grid stories in Storybook (Default, Columns, Rows, GridFlowStory, Alignment, MasonryBasic).