# BentoItem

A layout wrapper for items within a BentoGrid. Controls column and row spanning.

## Notes

- Use colSpan and rowSpan to control the size of the item within a BentoGrid.
- Responsive spans (colSpanMd, colSpanLg, etc.) allow for fluid layout shifts across breakpoints.

## Properties

| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| colSpan | `number` | 1 | Number of columns to span. |
| rowSpan | `number` | 1 | Number of rows to span. |
| colSpanMd | `number` | - | Columns to span on medium screens. |
| rowSpanMd | `number` | - | Rows to span on medium screens. |
| colSpanLg | `number` | - | Columns to span on large screens. |
| rowSpanLg | `number` | - | Rows to span on large screens. |

## Example

```astro
<BentoItem colSpan={2} rowSpan={2}>
  <Panel>Big Card</Panel>
</BentoItem>
```