# BentoGrid

A responsive CSS Grid container for modular bento-box layouts. Perfect for modern, information-dense dashboards and portfolios.

## Notes

- Use BentoGrid to create modular, card-based layouts that adapt to viewport size.
- Combine with BentoItem to control how individual cards span columns and rows.
- The grid defaults to 1 column on mobile, 2 on medium screens, and 3 on large screens.

## Properties

| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| columns | `number` | 1 | Default columns. |
| columnsMd | `number` | 2 | Columns on medium screens. |
| columnsLg | `number` | 3 | Columns on large screens. |
| gap | `number` | 4 | Gap between items (spacing token index). |

## Example

```astro
<BentoGrid columns={3} gap={4}>
  <BentoItem colSpan={2}><Panel>Featured</Panel></BentoItem>
  <BentoItem><Panel>Side</Panel></BentoItem>
  <BentoItem><Panel>Full Width</Panel></BentoItem>
</BentoGrid>
```