Gridalternative
Use Grid for uniform layouts; BentoGrid for asymmetric spans with built-in surfacesBentoGrid
Asymmetric grid layout with responsive spans and built-in surface styling for bento-style feature sections
Setup
import { BentoGrid } from '@fragments-sdk/ui';Examples
Default
Basic 3-column uniform bento grid
Loading preview...
Hero Layout
2×2 hero item with 4 supporting items in a 3-column grid
Loading preview...
Two Column
2-column bento with a wide item
Loading preview...
Full-Width Banner
3-column grid with a full-width item spanning all columns
Loading preview...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | node | Not set | BentoGrid.Item children |
columns | union234 | 3 | Number of columns — auto-collapses responsively (3→2→1) |
gap | enumnonexssmmdlgxl | md | Gap between grid items, mapped to spacing tokens |
style | object | Not set | — |
Usage Guidelines
When to use
- Asymmetric feature grids with hero + supporting items
- Dashboard overviews where cards have different visual weight
- Marketing pages with mixed-size content blocks
- Any layout where items need per-breakpoint column/row spans
When not to use
- Uniform grids where all items are the same size (use Grid)
- Form layouts with labeled fields (use Grid)
- Simple stacked content (use Stack)
Best practices
- Use colSpan/rowSpan with responsive objects for layouts that adapt across breakpoints
- The hero item typically uses colSpan={2} rowSpan={2} at lg and above
- Items include built-in surface styling — no need to wrap children in Card
- Grid auto-collapses: 3→2 columns below lg, all→1 column below sm
- Root and Item forward DOM props (aria-*, data-*, handlers), and Item style merges with span CSS vars
Accessibility
- Grid is purely visual — it does not affect reading order or semantics
- Ensure logical source order matches visual order for screen readers
- Hover effects are disabled when prefers-reduced-motion is set
- Border thickness increases in prefers-contrast: more mode