Grid

Grid is a thin wrapper around display: grid with prebuilt cols and gap variants. Class names are static so Tailwind's v4 scanner picks them up at build time — no dynamic concatenation.

import { Grid } from '@42/ui-react/grid';

<Grid cols={3} gap={4}>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</Grid>

Playground

<Component cols={12} gap={4} />

Full prop browser

Columns

The cols axis covers the common cases: 1, 2, 3, 4, 6, 12. Need an exotic count? Drop down to className="grid-cols-[…]" instead of expanding the variant set.

<Grid cols={2}>…</Grid>
<Grid cols={3}>…</Grid>
<Grid cols={4}>…</Grid>
<Grid cols={12}>…</Grid>   {/* default */}

Gaps

gap mirrors Tailwind's spacing scale at the values we actually use (0, 1, 2, 3, 4, 6, 8).

<Grid cols={4} gap={2}>…</Grid>
<Grid cols={4} gap={4}>…</Grid>   {/* default */}
<Grid cols={4} gap={8}>…</Grid>

API

When to use Grid vs Stack

Both lay out children with a gap. Use Grid when the layout has equal-width tracks (cards on a dashboard, a settings page); use Stack when items flow in a single direction (forms, toolbars, action rows).