Hex UIv1

Grid

CSS grid with column-count presets and token-bound gap. Pass `cols="auto-fit"` + `minColWidth` for responsive grids without media queries.

Three-column card grid (cols=3)

Free

Hobby

per editor / mo

$0

Pro

Most popular

per editor / mo

$19

Team

Growing teams

per editor / mo

$49

Responsive auto-fit (cols="auto-fit", minColWidth="14rem")

Reports
Audiences
Sources
Destinations
Settings

Installation

pnpm
pnpm dlx @hex-core/cli add grid

Responsive auto-fit

Tracks fit as many 20rem columns as the viewport allows; no media queries needed.

tsx
<Grid cols="auto-fit" minColWidth="20rem" gap="lg">
  {items.map(...)}
</Grid>

Span pattern (6-col dashboard)

Dashboard layout with mixed widths: children opt into cell spans via Tailwind col-span-* utilities. Grid presets cap at 6; reach for 6 + spans when you need a 4/2 or 3/3 split.

tsx
<Grid cols={6} gap="md">
  <Card className="col-span-6 lg:col-span-4">
    <CardHeader><CardTitle>Revenue</CardTitle></CardHeader>
    <CardContent>{/* chart */}</CardContent>
  </Card>
  <Card className="col-span-6 lg:col-span-2">
    <CardHeader><CardTitle>Top customers</CardTitle></CardHeader>
    <CardContent>{/* list */}</CardContent>
  </Card>
  <Card className="col-span-3 lg:col-span-2">
    <CardHeader><CardTitle>MRR</CardTitle></CardHeader>
    <CardContent>$48,210</CardContent>
  </Card>
  <Card className="col-span-3 lg:col-span-2">
    <CardHeader><CardTitle>Churn</CardTitle></CardHeader>
    <CardContent>2.1%</CardContent>
  </Card>
  <Card className="col-span-6 lg:col-span-2">
    <CardHeader><CardTitle>NPS</CardTitle></CardHeader>
    <CardContent>54</CardContent>
  </Card>
</Grid>

Variant values

colsColumn count or `auto-fit` mode.
cols=1
1
2
3
4
5
6
cols=2
1
2
3
4
5
6
cols=3
1
2
3
4
5
6
cols=4
1
2
3
4
5
6
cols=6
1
2
3
4
5
6
cols=auto-fit
1
2
3
4
5
6
ValueDescription
1
Single column — items stack vertically inside the grid.
2
Two even columns.
3default
Default — three even columns.
4
Four even columns.
6
Six even columns — dense layouts.
auto-fit
Tracks repeat to fill width, never below `minColWidth`.
gapGap between cells, bound to `--gap-*` tokens.
xs
1
2
3
sm
1
2
3
md
1
2
3
lg
1
2
3
xl
1
2
3
ValueDescription
xs
0.25rem — minimal separation.
sm
0.5rem — tight grid.
mddefault
1rem — default; standard rhythm.
lg
1.5rem — generous separation.
xl
2rem — major separation between cards.
alignCell vertical alignment within their grid row.
start
A
B
C
center
A
B
C
end
A
B
C
stretch
A
B
C
ValueDescription
start
Cells align to top of row.
center
Cells center vertically.
end
Cells align to bottom of row.
stretchdefault
Default — cells fill row height.

API Reference

PropTypeDefaultDescription
cols
"1" | "2" | "3" | "4" | "6" | "auto-fit"3Number of fixed columns, or `"auto-fit"` for responsive tracks (use with `minColWidth`).
gap
"xs" | "sm" | "md" | "lg" | "xl"mdGap between cells, bound to `--gap-*` tokens.
align
"start" | "center" | "end" | "stretch"stretchCell vertical alignment within their grid row.
minColWidth
string16remMin track size for `cols="auto-fit"` (e.g. `"20rem"`). Ignored when `cols` is a fixed integer.

AI Guidance

When to use

Use for visually-aligned grids of similar items: card galleries, image walls, dashboard tiles, settings panels. Prefer `cols="auto-fit"` + `minColWidth` over hand-written breakpoints when the column count should adapt to viewport width.

When not to use

Don't use for one-dimensional flows — use `Stack` (vertical) or `Cluster` (horizontal). Don't use for tabular data — use `<table>` or DataTable. Don't fight `Grid` to make uneven columns; if cells need different sizes, use a flexbox layout or a CSS grid with named tracks directly.

Common mistakes

  • Setting `cols={5}` and getting nothing — the preset only supports 1/2/3/4/6 (deliberate, to avoid odd visual rhythms); use `cols="auto-fit"` for arbitrary counts
  • Passing `cols="auto-fit"` without `minColWidth` — the default `16rem` may not match your design intent
  • Using `Grid` for two children when `Cluster` or `Stack` would communicate intent better

Accessibility

Grid is presentational. If the grid renders a list of similar items, wrap in `<ul>`/`<li>` for screen-reader semantics — Grid only handles visual layout.

Related components

Token budget: 300

Verified against @hex-core/components@1.12.0

Edit this page on GitHub