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="xl">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</Grid>

Playground

<Component cols={12} gap="xl" />

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 is a named t-shirt scale (xxs → xxl) mapped to static Tailwind gap-* classes. Need a value outside the scale? Drop to className="gap-…".

<Grid cols={4} gap="md">…</Grid>
<Grid cols={4} gap="xl">…</Grid>   {/* default */}
<Grid cols={4} gap="xxl">…</Grid>

API

When to use Grid vs Flex

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