# Grid (/docs/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.

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

<Grid cols={3} gap="xl">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</Grid>
```

## Playground [#playground]

<story.Playground />

### Full prop browser [#full-prop-browser]

<story.WithControl />

## Columns [#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.

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

## Gaps [#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-…"`.

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

## API [#api]

<TypeTable
  type="{
  cols: {
    type: &#x22;1 | 2 | 3 | 4 | 6 | 12&#x22;,
    default: '12',
    description: 'Column count. Drop to className for exotic counts.',
  },
  gap: {
    type: &#x22;'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'&#x22;,
    default: &#x22;'xl'&#x22;,
    description: 'Gap on the named t-shirt scale (xxs=2px … xl=16px … xxl=24px).',
  },
  asChild: {
    type: 'boolean',
    default: 'false',
    description: 'Render children as the root element (Ark UI polymorphism).',
  },
}"
/>

## When to use Grid vs Flex [#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`](/docs/flex) when items flow in a single direction (forms, toolbars, action rows).