3 Column Bento Grid

Masonry style grid with variable item heights

$ npx @hritik-sharmaa/repeat-ui add grid-3-column-bento-grid
Category
Grid
Added
Aug 14, 2025
Version
2.0.0
Packages
motion
Flavors
TS · JS · Tailwind · CSS
Live preview

Discover New Books

Find your next favorite read. Explore curated recommendations tailored to your taste.

Manage Library

Organize your reading list, track progress, & set reading goals.

Reading Goals

Set annual reading targets or challenge yourself with new genres.

Book Clubs

Join reading communities & discover books through discussions.

Reading Strategy

Personalized reading plan that fits your schedule and interests.

Find, Compare & Read

Discover great books. Compare reviews and start reading instantly.

Customize
16px
24px
1.02×
import Grid3ColumnBentoGrid from "@/components/repeat-ui/grid-3-column-bento-grid/preview";

<Grid3ColumnBentoGrid />

Installation

  1. Run the command

    Adds the files and installs any packages they need. Works with npm, pnpm, yarn and bun.

    $ npx @hritik-sharmaa/repeat-ui add grid-3-column-bento-grid --variant ts-tailwind

  2. Use it

    The files are in components/repeat-ui/grid-3-column-bento-grid/.

    import Grid3ColumnBentoGrid from "@/components/repeat-ui/grid-3-column-bento-grid/preview";

export default function Page() {
  return <Grid3ColumnBentoGrid />;
}

Props

PropTypeDefaultDescription
maximizeCard{}Large left card configuration for primary content
manageCard{}Top right card configuration for management features
setGoalsCard{}Small bottom-left card for goal setting features
loungesCard{}Small bottom-right card for community features
strategyCard{}Bottom-left large card for strategy/planning features
findCompareCard{}Bottom-right card for discovery and comparison features
gapnumber16Space between cards, in pixels.
radiusnumber24Card corner radius in pixels.
hoverScalenumber1.02How much a card grows on hover.

More grid

See all
2 Column Bento GridDynamic grid layout with animated items
Pinterest GridPhoto gallery grid with lightbox effect
Accordion GalleryImage panels that open wide under the pointer