vaiperui

components / grid

Grid

CSS grid with responsive columns, gap and items that span columns or rows.

How to use

`columns` takes a number (1 to 12) or an object per breakpoint (`base`, `sm`, `md`, `lg`, `xl`), mobile first: `{ base: 1, md: 2, lg: 4 }`. Use `GridItem` when a cell must span more than one column or row.

preview
colSpan 2
1
2
3
4
5
6
Grid.tsx
import { Grid, GridItem } from "vaiperui";
 
<Grid columns={{ base: 1, md: 2, lg: 4 }} gap={4}>
  <GridItem colSpan={2}>Wide</GridItem>
  <GridItem>Item</GridItem>
</Grid>

Columns

preview
1
2
3
4
columns={2}
1
2
3
4
5
6
columns={3}
1
2
3
4
5
6
7
8
columns={4}
columns.tsx
<Grid columns={2} />
<Grid columns={3} />
<Grid columns={{ base: 1, md: 3 }} />

Gap

preview
1
2
3
gap={0}
1
2
3
gap={2}
1
2
3
gap={8}
gap.tsx
<Grid columns={3} gap={0} />
<Grid columns={3} gap={8} />

Spans

preview
colSpan 2
rowSpan 2
1
2
colSpan / rowSpan
spans.tsx
<GridItem colSpan={2} />
<GridItem rowSpan={2} />

Props

PropValuesDefaultDescription
columns1 – 12 | { base, sm, md, lg, xl }1Number of columns, or one value per breakpoint
gap0 | 1 | 2 | 3 | 4 | 6 | 84Space between children (4px steps)
asElementType"div"Element or component to render (`section`, `ul`, `main`...)
GridItem colSpan / rowSpan1 – 12 / 1 – 6noneColumns and rows the item spans

Accessibility

  • `Grid` and `GridItem` render plain `<div>`s by default, with no role; `as` changes the element (for example `ul`/`li`).
  • They are purely visual: no focus, keyboard or ARIA behavior is added, and extra props reach the element.
  • Screen readers and Tab follow DOM order, not the visual position.

Keep in mind

  • `colSpan`/`rowSpan` and responsive `columns` change the layout only; keep the source order meaningful at every breakpoint.
  • It adds no list semantics: use `as="ul"` and `as="li"` on `GridItem` when the items are a list.