Foundations
BentoItem
A layout wrapper for items within a BentoGrid. Controls column and row spanning.
Curated demo
BentoItem controls span inside the parent grid.
Sibling card
Reference
A layout wrapper for items within a BentoGrid. Controls column and row spanning.
- 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.
Props
| 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 snippet
<BentoItem colSpan={2} rowSpan={2}>
<Panel>Big Card</Panel>
</BentoItem>