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.
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.
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.
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.
If you ship something cool with it, post it on X and tag me @Dulajweb, or send it over. I’d love to see what you create.
Questions or feedback? Reach me anytime: dulajdilshan766@gmail.com or on X @Dulajweb
Dulaj dilshan
