Advanced Bento Grid

Advanced Bento Grid gives you a production-ready 4-column CSS grid system where every card is independently configurable — title, description, image background, background color,…

Advanced Bento Grid gives you a production-ready 4-column CSS grid system where every card is independently configurable — title, description, image background, background color, column span (1–4), and row span (1–3).

Hover states use opacity cross-fade only (no border-color transitions, no transform jank), keeping your layout rock-solid at every interaction. All controls live in Framer's property panel — no code editing required.

What's included:

• Per-card col/row span control (build any mosaic pattern)

• Image background URL support per card

• Hover accent glow + border overlay (opacity-only, SOP-compliant)

• Global controls: gap, row height, padding, corner radius, accent color, text color, border color, background

• No external libraries — pure React + CSS

• Zero layout shift on all interactions

Perfect for SaaS feature sections, product showcases, portfolio layouts, and any design that needs a polished bento grid without writing a single line of code.

This grid also powers Dashboard Kit — a full living dashboard in one drop:

https://www.framer.com/community/marketplace/components/dashboard-kit/

Want the whole landing page? Grab the free template:

https://www.framer.com/community/marketplace/templates/launchbase/