Primitives
Grid
Equal tracks in two dimensions
Columns
1234
123456
123456
Rows
123456
Usage
import { Grid, Text } from "@gpuixui/primitives";
<Grid columns={2} gap="sm">
<Text role="caption" tone="muted">Width</Text>
<Text role="code">1280 px</Text>
<Text role="caption" tone="muted">Height</Text>
<Text role="code">800 px</Text>
</Grid>;API
| Prop | Type | Default | Consequence |
|---|---|---|---|
columns | number | required | equal column tracks; floored, minimum 1 |
rows | number | auto | equal fixed rows; floored, minimum 1 |
gap | spacing step | none | both axes, from spacing |
grow | boolean | false | takes leftover space on the parent's axis |
ref | Ref<PublicInstance> | — | the painted element, for a measurement, a scroll or a focus call |
aria-id | string | — | the element's author id, exposed as the platform's automation id |
onLayout | (event: EventPayload) => void | — | the painted box after the first paint and each resize |
className | string | — | a Tailwind class string, joined after the recipe so it wins conflicts |
style | StyleDesc | — | merged last |
children | ReactNode | — | cells, in source order |
testId | string | — | stable locator |
Edit this page on GitHubpackages/primitives/docs/grid.mdx