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/

Mosaic grid with image & hover FX