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.
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.
