Image Bento Gallery: Free Layout Component by Mohd Mehraj

Image Bento Gallery transforms CMS content into a modern bento style experience with dynamic grid layouts, masonry presets, hover animations, fullscreen lightbox popups, responsive spanning cells, and interactive image presentation

Image Bento Gallery is a premium CMS compatible bento gallery component for Framer, designed for image galleries, portfolio showcases, SaaS websites, editorial layouts, creative agencies, and modern landing pages. Built with responsive bento grid layouts, customizable spanning cells, fullscreen lightbox viewing, hover scale animations, mixed layout presets, and interactive image transitions, it transforms traditional gallery grids into immersive modern experiences.

Unlike standard image grids or flat masonry galleries, Image Bento Gallery creates dynamic bento style layouts with flexible image spanning, layered compositions, responsive scaling, and cinematic popup viewing. Images automatically arrange into modern bento gallery patterns optimized for desktop and mobile devices while maintaining clean spacing, smooth interaction, and visual balance.

The component fully supports CMS images, uploaded media, custom image URLs, interactive hover effects, popup lightbox viewing, responsive layouts, and customizable grid presets including masonry, hero, spotlight, and editorial style compositions. Designers can fully customize columns, rows, spacing, borders, hover effects, popup styling, corner radius, animations, and layout behavior directly inside Framer.

What Makes This Different From Other Components

Unlike traditional image grids or simple gallery layouts, Image Bento Gallery combines responsive bento layouts, CMS compatibility, interactive lightbox viewing, customizable spanning cells, hover scaling, and cinematic compositions into one premium gallery system.

The flexible bento structure allows creators to build modern editorial style galleries with more depth, hierarchy, and visual storytelling compared to standard grid layouts.

Instructions

Paste the component into your Framer project and upload images directly or connect CMS collections for dynamic content rendering. Choose between auto, preset, or fully custom bento layouts.

Customize columns, rows, spacing, hover effects, popup viewing, borders, corner radius, layout presets, image scaling, and overall styling directly inside Framer.

How It Works

Image Bento Gallery arranges images into responsive bento grid layouts using customizable spanning cells and dynamic positioning.

Users can interact through hover animations and fullscreen popup viewing while responsive layouts automatically adapt across desktop and mobile devices for smooth modern gallery experiences.