5c:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5d:T8c7,

About

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.

What it does

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.

What you can customize

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.

Great for

Portfolio and photography showcases
Brand moodboards and inspiration walls
Product feature galleries
Blog layout index pages
Creative studio landing pages

Share your build

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.

Need help?

Questions or feedback? Reach me anytime: dulajdilshan766@gmail.com or on X @Dulajweb

59:[["$","$L5c",null,{"post":{"id":"019e98ad-b6f5-795a-b16b-c45689b967fd","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"0bce05c0-4760-4da5-b2f4-851230a1db47","name":"Dulaj Design","slug":"dulaj-dilshan-gy7b4j","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/132150/avatar-ZgETawWJyCuMuzgHBdPTUADcWJAJWn.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"eT3l6jTSVEdoabG3KwIx","resolved":true,"title":"MasonryGallery_all","body":"$5d","bodyJson":null,"introduction":"Build fluid masonry grids ease","slug":"masonrygallery-all","author":{"framerUserId":"0bce05c0-4760-4da5-b2f4-851230a1db47","name":"Dulaj Design","slug":"dulaj-dilshan-gy7b4j","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/132150/avatar-ZgETawWJyCuMuzgHBdPTUADcWJAJWn.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/eT3l6jTSVEdoabG3KwIx/masonrygallery-all-hV0HKc3Txy9GIiSrjZb0AbX9gIFnuE","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-06-01T11:07:55.452Z","updatedAt":"2026-08-28T03:16:08.188Z","publishedAt":"2026-06-05T16:46:21.941Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://masonrygalleryall.framer.website/","price":"15","paymentUrl":"https://buy.polar.sh/polar_cl_UVvpomxMaALe4D6Zh2H52mwdMswOX0OBCDqwH0IeXcF","workshop":true,"categories":[{"id":"66bb31f7-cddf-4a3e-8604-95b3467aecc2","name":"Galleries","slug":"galleries"}],"lastSaveId":"0IlVqc9ei8UUinF8qpzD","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-05T16:46:21.941Z","updatedAt":"2026-06-05T16:46:21.941Z","reported":false}}],"$L5e"]

Suggested for you