5d:I[473921,["/creators-assets/_next/static/immutable/chunks/2bxtessbrg0z1.js","/creators-assets/_next/static/immutable/chunks/3xktnaujy87te.js","/creators-assets/_next/static/immutable/chunks/3futvmn4fb096.js","/creators-assets/_next/static/immutable/chunks/24bk4ojcoor5n.js","/creators-assets/_next/static/immutable/chunks/1ozc4wc1du10z.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1n4sz3rar6_gg.js","/creators-assets/_next/static/immutable/chunks/2h_rs7nbfvb7-.js","/creators-assets/_next/static/immutable/chunks/3ly-i84yiij4i.js","/creators-assets/_next/static/immutable/chunks/3oybmd01gs-b6.js","/creators-assets/_next/static/immutable/chunks/0vxt9zvn936s0.js","/creators-assets/_next/static/immutable/chunks/1eyot9c9uwocm.js","/creators-assets/_next/static/immutable/chunks/03stgnoj58q7s.js","/creators-assets/_next/static/immutable/chunks/1cey7skpirawe.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3gipqcylfnv5h.js","/creators-assets/_next/static/immutable/chunks/3fujn21cf_mt1.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/1ftf6fdyz0hh4.js","/creators-assets/_next/static/immutable/chunks/2lxef2-u417vc.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/3uo-268z2xnq9.js","/creators-assets/_next/static/immutable/chunks/2y36h9lujf54i.js","/creators-assets/_next/static/immutable/chunks/2ch5kewqiwntv.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/3xmobvbzj3637.js","/creators-assets/_next/static/immutable/chunks/26fs9mkd8gzie.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/110hzb6dmcbdr.js","/creators-assets/_next/static/immutable/chunks/2eiu9v0ook5ln.js","/creators-assets/_next/static/immutable/chunks/1zt764sfv2wd7.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js","/creators-assets/_next/static/immutable/chunks/3gx0_q52o4oil.js","/creators-assets/_next/static/immutable/chunks/0u_jiik6ovv_e.js","/creators-assets/_next/static/immutable/chunks/2warb3xv9rce7.js","/creators-assets/_next/static/immutable/chunks/1tvhyiuh-gmez.js"],"PostDetailCard"] 5e:T8a6,

About this Component

The Pinterest-style Image Grid component lets you display images in three different layouts: Masonry, Grid, and Scattered. It features a customizable design with property controls for height, border styling, and spacing. Users can click on an image to open a full-screen preview with intuitive navigation controls, making it perfect for portfolios, galleries, or any design that requires a creative image presentation.

With fully adjustable properties, including the ability to control the image border, gap sizes, and background color, this component provides flexibility for different design needs. Whether you’re building an online gallery or a product showcase, this component adapts seamlessly to any project.

Features

🖼️ Multiple Layouts: Choose between Masonry, Grid, or Scattered layouts.
🔲 Adjustable Image Height: Set individual heights for images to achieve custom grid layouts.
🔄 Interactive Image Preview: Click to open an image in a full-screen carousel with navigation.
🎨 Customizable Borders: Control border radius, width, and color for each image.
🔲 Gap Controls: Set horizontal and vertical gaps between images in scattered layout or a consistent gap in other layouts.
🎥 Image Preview Modal: Full-screen preview with next/previous buttons and image counter.
⚙️ Performance Optimized: Lightweight and responsive, works seamlessly across all devices.
🪶 No Code Setup: Easily configure the grid and preview controls via Framer's intuitive property controls.

How to Use

Simply drag the Image Grid component into any section of your Framer project. Upload your images and customize the layout, image properties, and preview settings. Adjust the appearance using the built-in controls for borders, gaps, and background color.

5a:[["$","$L5d",null,{"post":{"id":"019a59d4-d6f5-74ae-8ca7-3babed8a71ee","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"cb743a6c-58ff-4c1b-9465-c9a9c1b5dc54","name":"Shams Digital","slug":"shams-nahid","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/46301/avatar-IYaeECxW1oY7dsLrudldlDEpzR7iqH.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"TaOJysc4e28GhpedQHiC","resolved":true,"title":"Pinterest Style Grid","body":"$5e","bodyJson":null,"introduction":"","slug":"pinterest-style-grid","author":{"framerUserId":"cb743a6c-58ff-4c1b-9465-c9a9c1b5dc54","name":"Shams Digital","slug":"shams-nahid","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/46301/avatar-IYaeECxW1oY7dsLrudldlDEpzR7iqH.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/TaOJysc4e28GhpedQHiC/pinterest-style-grid-lsjROcA5n1l5ACIJZ5iytfHOvLFait","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-10-28T18:59:43.286Z","updatedAt":"2025-11-06T11:00:23.277Z","publishedAt":"2025-11-06T15:41:52.245Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://chartreuse-founders-142040.framer.app/","price":"12","paymentUrl":"https://shams-nahid.lemonsqueezy.com/buy/02e4e639-556e-49e2-8f52-948b013c3ca5","workshop":true,"categories":[{"id":"66bb31f7-cddf-4a3e-8604-95b3467aecc2","name":"Galleries","slug":"galleries"}],"lastSaveId":"fQvdk0Af93gXqMhghXQg","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-11-06T15:41:52.245Z","updatedAt":"2025-11-06T15:41:52.245Z","reported":false,"type":"post"}}],"$L5f"]

Suggested for you