Patterns · Layout
Bento Grid
Since v1.6.0
A grid of card tiles in mixed sizes. Responds to its own width: 1 column, 2 at 480px, 4 at 768px.
import { BentoGrid } from '@nexub/patterns';Usage
Use it for
Overview pages where a few items deserve more room than the rest.
Use something else for
Lists the user scans in order: dense packing can move tiles out of reading order.
Equal-weight items: use Grid.
Examples
Dashboard
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| BentoGrid childrenrequired | ReactNode | — | BentoTiles. Dense packing back-fills gaps left by large tiles, so visual order can differ from source order. |
| size | '1x1' | '2x1' | '1x2' | '2x2' | '1x1' | Tile span, columns × rows. Two-wide spans apply from 2 columns up. |
| ...Card props | CardProps | — | A tile is a surface Card (variant is fixed); tone, surface and effect pass through. |
On iOS & Android
Web only
Bento Grid has no @nexub/react-native twin. On phones, follow the platform pattern instead, or compose it from the native components listed on the React Native page.