Grid

CSS Grid wrapper with typed responsive columns, rows, gap (including responsive gap), and auto-flow props.

<Grid columns={3} gap={4} className="w-full">  <DecorativeBox className="h-20" />  <DecorativeBox className="h-20" />  <DecorativeBox className="h-20" />  <DecorativeBox className="h-20" />  <DecorativeBox className="h-20" />  <DecorativeBox className="h-20" /></Grid>

Usage

import { Grid } from "@reva/ui";

Examples

Responsive Columns

Pass an object to change the column count at different breakpoints.

<Grid columns={{ default: 1, md: 2, lg: 3 }} gap={4} className="w-full">  <DecorativeBox className="h-20" />  <DecorativeBox className="h-20" />  <DecorativeBox className="h-20" />  <DecorativeBox className="h-20" />  <DecorativeBox className="h-20" />  <DecorativeBox className="h-20" /></Grid>

Responsive gap

gap uses the same spacing map as Flex and Stack, and can be responsive: { default: 4, md: 6, xl: 8 }.

<Grid columns={2} gap={{ default: 4, md: 6, xl: 8 }} className="w-full">  <DecorativeBox className="h-24" />  <DecorativeBox className="h-24" />  <DecorativeBox className="h-24" />  <DecorativeBox className="h-24" /></Grid>

Two Columns

<Grid columns={2} gap={6} className="w-full">  <DecorativeBox className="h-32" />  <DecorativeBox className="h-32" /></Grid>

Props

Prop	Type	Default	Description
`columns`	`1`–`12` \| `"none"` \| `"subgrid"` or responsive object	—	Grid columns. Responsive: `{ default: 1, md: 2, lg: 3 }`.
`rows`	`1`–`6` \| `"none"` \| `"subgrid"` or responsive object	—	Grid rows.
`gap`	Spacing step (`0`–`96` per the supported map) or responsive object	—	Gap between cells (`gap-*`). Responsive: `{ default: 4, md: 6, xl: 8 }`.
`autoFlow`	`"row"` \| `"column"` \| `"dense"` \| `"row-dense"` \| `"column-dense"`	—	Grid auto-flow direction.
`inline`	`boolean`	`false`	Use `inline-grid` instead of `grid`.
`as`	HTML element	`"div"`	Rendered element.
`asChild`	`boolean`	`false`	Merge props onto the child element.
`className`	`string`	—	Additional Tailwind / utility classes.