Foundations
BentoGrid
A responsive CSS Grid container for modular bento-box layouts. Perfect for modern, information-dense dashboards and portfolios.
Curated demo
Featured panel with extra breathing room.
Compact supporting card.
Another surface in the grid.
Reference
A responsive CSS Grid container for modular bento-box layouts. Perfect for modern, information-dense dashboards and portfolios.
- 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.
Props
| 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 snippet
<BentoGrid columns={3} gap={4}>
<BentoItem colSpan={2}><Panel>Featured</Panel></BentoItem>
<BentoItem><Panel>Side</Panel></BentoItem>
<BentoItem><Panel>Full Width</Panel></BentoItem>
</BentoGrid>