---
title: "Dynamic Bento Grid — Framer component · Best of Framer"
description: "$12.00 · Framer component · by Francesco Caronte · Sections. About this Component Dynamic Bento Grid is an interactive layout component that lets you build flexible bento-style grids…"
canonical: "https://framer.elliotli.dev/component/dynamic-bento-grid"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/Dynamic Bento Grid

# Dynamic Bento Grid

Resizable & Swappable Layout

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

![Dynamic Bento Grid preview image 1](https://framer.elliotli.dev/og/component/dynamic-bento-grid/815d0d8856f6ee2e/1600x1200.jpg)

## Summary

About this Component Dynamic Bento Grid is an interactive layout component that lets you build flexible bento-style grids with resizable and swappable cards.Cards can contain…

## Description

## About this Component

Dynamic Bento Grid is an interactive layout component that lets you build **flexible bento-style grids with resizable and swappable cards**.Cards can contain images or videos and can be dragged, resized from a corner, and reordered in real time with smooth animations.

Designed for portfolios, galleries, and modern landing pages, it provides full control over layout, interactions, and visual details, while remaining **fully responsive**.

## Live Preview

[https://dynamicbentogrid.framer.website/](https://dynamicbentogrid.framer.website/)

## Customizable Properties

### / Cards

-   **Cards** – Add, remove, and manage grid items
    
-   **Link Target** – Open links in the same tab or a new tab
    

### / Layout

-   **Columns** – Number of grid columns
    
-   **Gap** – Space between cards
    
-   **Radius** – Corner radius for all cards
    

### / Hover

-   **Hover** – Hover elevation intensity
    
-   **Hover Shadow** – Show or hide shadow on hover
    
-   **Shadow** – Customize shadow values
    

### / Animation

-   **Animation** – Choose animation behavior
    

### / Drag & Resize

-   **Drag** – Enable or disable card dragging
    
-   **Resize UI** – Show or hide the resize handle
    
-   **Handle Size** – Size of the resize handle
    
-   **Handle Background** – Background color of the resize handle
    
-   **Handle Blur** – Blur intensity for the handle background
    
-   **Handle Icon Color** – Color of the resize icon
    
-   **Handle SVG** – Use a custom SVG for the resize handle
    

### / Link Button

-   **Link Button** – Show or hide the link button on cards
    
-   **Link Size** – Size of the link button
    
-   **Link Background** – Background color of the link button
    
-   **Link Blur** – Blur intensity for the link background
    
-   **Link Icon Color** – Color of the link icon
    
-   **Link SVG** – Use a custom SVG for the link icon
    

## Use cases

Portfolios · Interactive galleries · Landing pages · Editorial layouts · Creative showcases

## Refund Policy

All sales of digital products are final and non-refundable.

If you have any questions about the product, please contact me at [info@carontefrancesco.it](mailto:info@carontefrancesco.it) before completing your purchase. I’m happy to help.

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

-   All · #2516

## Details

- **Author**: Francesco Caronte
- **Price**: $12.00
- **Published**: 2026-02-18
- **Updated**: 2026-03-02
- **Added**: 2026-02-14
- **Categories**: Sections

## More like this

-   [Project Index](/component/project-index) — Bernardo Lickfold · Free — Editorial index: hover & scroll
-   [Face Parade](/component/face-parade) — RAjan · Free — Animated team profiles
-   [Staircase Cover Flow](/component/staircase-cover-flow) — Karim Saif · $7 — editorial-inspired image gallery
-   [In Their Words](/component/in-their-words) — Majed Monem · $9 — A wall of customer quotes