Bento Grid
A responsive bento grid layout.
npx arupui add bento-grid
Preview
Wide Card
Card
Card
Wide Card
Usage
bento-grid.tsx
import { BentoGrid, BentoGridItem } from "@/components/blocks/bento-grid"
<BentoGrid columns={3}>
<BentoGridItem colSpan={2}>Wide</BentoGridItem>
<BentoGridItem>Normal</BentoGridItem>
</BentoGrid>Props
| Prop | Type | Default |
|---|---|---|
columns | number | 3 |
columnsType:
numberDefault: 3