# BentoGrid

> A dashboard of tiles on the 12 column grid: one column on a phone, 6 from 640px, 12 from 1024px. Each tile is a size container, so what is inside responds to the tile's width, not the window's. The tiles keep the order of the markup, which is the order they are read in, and enter one after another, the stagger capped.

Section: Layout. Docs: https://entrepta.vercel.app/docs/components/bento-grid

## Install

```bash
npx @entrepta/cli@latest add bento-grid
```

Files: `layout/bento-grid.tsx`, `lib/motion.ts`, `motion/reveal.tsx`.
npm packages: `motion`.
Comes with: `motion-lib`, `reveal`.

## Usage

```tsx
import { BentoGrid, BentoItem } from "@/components/entrepta/bento-grid"
import { SpotlightCard } from "@/components/entrepta/spotlight-card"

<BentoGrid>
  <BentoItem colSpan={{ sm: 6, lg: 8 }} rowSpan={{ lg: 2 }}>
    <SpotlightCard>…</SpotlightCard>
  </BentoItem>
  <BentoItem colSpan={{ sm: 3, lg: 4 }}>
    <SpotlightCard><Metric … /></SpotlightCard>
  </BentoItem>
</BentoGrid>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `colSpan` | `{ sm?: 1-6, lg?: 1-12 }` | { sm: 3, lg: 4 } | On BentoItem. A breakpoint left out spans the full row |
| `rowSpan` | `1-4 \| { sm?, lg? }` | - | On BentoItem. A number applies from 640px up |
| `reveal` | `boolean` | true | On BentoItem: the entrance |
| `--bento-row` | `CSS length` | 120px | The shortest row |