FlexMasonry brings a highly optimized, fully responsive grid layout straight into your Framer projects. Drop it into a portfolio site, a product showcase, or a media blog to let your images naturally stack without breaking form. It effortlessly shifts layouts across devices, giving your users a seamless browsing experience right on the page.
It renders a dynamic multi-column masonry grid for up to 12 images, handling seamless transitions between CSS Columns and JS Masonry layouts. The component automatically adjusts spacing and columns for mobile, tablet, and desktop views while using smart lazy loading to keep page speeds incredibly fast. It also includes an interactive lightbox feature and elegant hover effects for smooth user engagement.
Grid layout: Toggle responsive behavior, customize specific column counts for mobile, tablet, and desktop, and fine-tune exact breakpoint triggers alongside the pixel gap between items.
Render settings: Choose between CSS Columns or JS Masonry engineering, select custom load animations like Wave, and pick your favorite hover overlay style.
Media & text styling: Turn the built-in Lightbox on or off, enable lazy loading for performance, and fully customize the background overlay color as well as the caption title text color.
Portfolio and photography showcases
Brand moodboards and inspiration walls
Product feature galleries
Blog layout index pages
Creative studio landing pages
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
