---
title: "Advanced Bento Grid — Free Framer component · Best of Framer"
description: "Free Framer component · by Isaac Yi · Backgrounds. Advanced Bento Grid gives you a production-ready 4-column CSS grid system where every card is independently configurable — title,…"
canonical: "https://framer.elliotli.dev/component/advanced-bento-grid"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Advanced Bento Grid

# Advanced Bento Grid

Mosaic grid with image & hover FX

[View on Framer](https://framer.com/marketplace/components/advanced-bento-grid/?via=elliot-li)

![Advanced Bento Grid preview image 1](https://framer.elliotli.dev/og/component/advanced-bento-grid/5ab3c1e5e0ee3dc0/1600x919.jpg)

## Summary

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,…

## Description

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/](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/](https://www.framer.com/community/marketplace/templates/launchbase/)

## Rank history [How rankings work →](/terms#rankings)

-   All · #6515

## Details

- **Author**: Isaac Yi
- **Published**: 2026-06-28
- **Updated**: 2026-07-16
- **Added**: 2026-06-28
- **Categories**: Backgrounds

## More like this

-   [Live_Backgrounds.exe](/component/live-backgrounds-exe) — S̶̈́͂IX BILLIÖ̴́N HERSELF · $19 — Animated backgrounds, 19 presets
-   [Drumskin](/component/drumskin) — KOJA Studios · Free — Interactive dot grid background
-   [Eclipse Ring](/component/eclipse-ring) — Lunaut Studio · $9 — A total eclipse for your hero
-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background