# Grid

Grid with a set number of equal-width columns, adjustable gaps and styling for each cell. Cells can optionally fade in one after another in reading order.

> Primitive · Free · Layout — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add grid
```

## Import

```tsx
import { Grid } from "@/components/ui/grid/grid";
```

## Variants

- `categories` — Categories: `npx @lumioui/cli add pro/grid-categories`
- `menu` — Product grid: `npx @lumioui/cli add grid-menu`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `columns?` | `number` | Number of columns. Default 2. |
| `gap?` | `number` | Gap between cells in px. |
| `className?` | `string` | — |
| `cellClassName?` | `string` | Extra classes for each cell wrapper. |
| `cascade?` | `boolean` | Cells switch on in reading order at mount (dim → on, 40ms apart). Default false. |
| `cascadeDelay?` | `number` | Wait before the first cell switches on, in ms — to follow a header band. Default 0. |
| `children?` | `React.ReactNode` | — |

Source: https://lumioui.com/components/grid