Grid

CSS Grid wrapper with token-driven gap, responsive column count, and explicit `grid-template-columns` escape hatch.

npx visor add grid

Why Grid?

Grid covers the CSS Grid pattern most apps actually use — equal fractional columns with a token-spaced gap — and ramps to the full grid-template-columns escape hatch for asymmetric layouts. Both columns and gap accept the responsive { base, sm, md, lg, xl } map.

Equal Columns

One

Two

Three

Responsive Columns

<Grid columns={{ base: 1, md: 2, lg: 4 }} gap={{ base: "sm", md: "md" }}>
  Tiles
</Grid>

Template-String Escape Hatch

<Grid columns="1fr 2fr" gap="lg">
  <aside>Sidebar</aside>
  <main>Main content</main>
</Grid>

Polymorphic `as`

<Grid as="ul" columns={2} gap="sm">
  <li>One</li>
  <li>Two</li>
</Grid>

Installation

npx visor add grid

API Reference

GridProps

Prop	Type	Default	Description
`as`	`keyof React.JSX.IntrinsicElements`	`'div'`	HTML element to render.
`columns`	`number \| ResponsiveProp<number> \| string`	`1`	Column count (number or responsive map), or an explicit grid-template-columns string (e.g. "1fr 2fr").
`gap`	`GridSpacing \| ResponsiveProp<GridSpacing>`	`'md'`	Space between cells. Token-named. Accepts a responsive map.
`align`	`'start' \| 'center' \| 'end' \| 'stretch'`	—	Block-axis (vertical) alignment of items within their cells.
`justify`	`'start' \| 'center' \| 'end' \| 'stretch'`	—	Inline-axis (horizontal) alignment of items within their cells.

The component also accepts all standard HTML attributes for the rendered element.

On this page