---
title: "BentoExpandGrid — Framer component · Best of Framer"
description: "$15.00 · Framer component · by Dulaj Design · Text. About BentoExpandGrid brings a sophisticated, interactive layout system to your Framer projects."
canonical: "https://framer.elliotli.dev/component/bentoexpandgrid"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/BentoExpandGrid

# BentoExpandGrid

Interactive expandable bento

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

![BentoExpandGrid preview image 1](https://framer.elliotli.dev/og/component/bentoexpandgrid/2fc34c93b2c21d92/1600x1200.jpg)

## Summary

About BentoExpandGrid brings a sophisticated, interactive layout system to your Framer projects.

## Description

### About

**BentoExpandGrid** brings a sophisticated, interactive layout system to your Framer projects. Inspired by the popular "Bento" design trend, this component allows you to create a grid of tiles that users can click to expand, revealing more detail without leaving the page. Whether it’s for a portfolio, a product feature list, or a complex dashboard, it provides a tactile, premium feel to your site’s navigation.

### What it does

It generates a responsive grid where each item can be set to "grow" into a larger size (spanning multiple columns or rows) upon interaction. The component automatically calculates the layout based on your minimum tile width and gap settings, ensuring a perfect fit across different screen sizes. With built-in support for overlays and smooth transitions, it handles the complex logic of expanding tiles while maintaining a clean, professional aesthetic.

### What you can customize

-   **Grid Layout:** Set the minimum tile width, row height, and gap between items to ensure the grid fits your design perfectly.
    
-   **Tile Styling:** Full control over corner radius (individual corners or all-at-once), border toggle, and border color.
    
-   **Expansion Logic:** Define exactly how many columns and rows a tile should span when expanded, and toggle the "auto-close" feature for other tiles.
    
-   **Typography & Colors:** Customize Title and Body fonts (via Inter or your project fonts) and colors.
    
-   **Overlays:** Adjust the overlay opacity (0.0 to 1.0) to ensure text readability over background images or colors.
    

### Great for

-   **Portfolio Case Studies:** Show a teaser image that expands into a full description.
    
-   **Feature Showcases:** Detail product capabilities in a compact, interactive grid.
    
-   **Interactive Team Sections:** Display team photos that expand to show bios.
    
-   **Service Listings:** Organize diverse offerings in a clean, masonry-style layout.
    
-   **Resource Hubs:** Create a "clickable" library of links or documents.
    

### Need help?

Questions or feedback? Reach me anytime: [**dulajdilshan766@gmail.com**](mailto:dulajdilshan766@gmail.com) or on X **@Dulajweb**

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

-   All · #9480

## Details

- **Author**: Dulaj Design
- **Price**: $15.00
- **Published**: 2026-03-18
- **Updated**: 2026-09-05
- **Added**: 2026-03-10
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing