Layout

Grid

A reusable CSS grid primitive for page sections, card clusters and dense interface layouts.

Component

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

3 controls

Item 1

Item 2

Item 3

Controls

columns

gap

items3

<Grid columns={3} gap="md">
  {items.map((item) => (
    <Card key={item.id}>
      <CardContent>{item.label}</CardContent>
    </Card>
  ))}
</Grid>

11 generated

Prop	Type	Default	Notes
`align`	`'center' \| 'start' \| 'end' \| 'stretch'`	`-`	Applies item alignment.
`as`	`ElementType`	`"div"`	Custom root element or component.
`asChild`	`boolean`	`false`	Generated from GridProps.
`children`	`ReactNode`	`-`	Grid content.
`className`	`string`	`-`	Adds classes to the root grid.
`columns`	`1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 12`	`-`	Applies a static grid column count.
`content`	`'center' \| 'start' \| 'end' \| 'between'`	`-`	Applies grid content alignment.
`gap`	`'sm' \| 'md' \| 'lg' \| 'xl' \| 'none' \| 'xs' \| '2xl'`	`-`	Applies a standard gap size.
`size`	`'sm' \| 'md' \| 'lg'`	`"md"`	Generated from GridProps.
`tone`	`'default'`	`"default"`	Generated from GridProps.
`variant`	`'default' \| 'stack'`	`"default"`	Generated from GridProps.
`...elementProps`	`HTMLAttributes<HTMLElement>`	`-`	Forwarded to the root element.