BentoExpandGrid

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 or on X @Dulajweb