Grid
Grid
A CSS grid layout primitive with first-class responsive column counts — pairs with Stack for flex layouts.
import { Grid, GridItem } from "@pompeitech/vesuvius-ui";Basic
1
2
3
4
5
6
7
8
Responsive columns
cols (and gap) accept a plain number, or a { base, sm, md, lg, xl } object for per-breakpoint values.
1
2
3
4
5
6
7
8
GridItem spans
full width
span 2
span 2
API
Grid
| Prop | Type | Default | Description |
|---|---|---|---|
cols | 1–12, or { base?, sm?, md?, lg?, xl? } of those | 1 | Column count, responsive when given the breakpoint-object form. |
gap | Tailwind spacing scale number, or { base?, sm?, md?, lg?, xl? } of those | 0 | Grid gap, responsive the same way as cols. |
Plus every native <div> prop.
GridItem
| Prop | Type | Description |
|---|---|---|
colSpan | 1–12, or { base?, sm?, md?, lg?, xl? } of those | How many columns this item spans — responsive, same breakpoint-object form as Grid's own props. |
rowSpan | 1–6 | How many rows this item spans — not responsive. |
Plus every native <div> prop.