---
title: "Pinterest Style Grid — Framer component · Best of Framer"
description: "$12.00 · Framer component · by Shams Digital · Galleries. About this Component The Pinterest-style Image Grid component lets you display images in three different layouts: Masonry,…"
canonical: "https://framer.elliotli.dev/component/pinterest-style-grid"
---

[Home](/)/[Components](/components)/[Galleries](/components/category/galleries)/Pinterest Style Grid

# Pinterest Style Grid

[View on Framer](https://framer.com/marketplace/components/pinterest-style-grid/?via=elliot-li)

![Pinterest Style Grid preview image 1](https://framer.elliotli.dev/og/component/pinterest-style-grid/1447105490927f61/1600x1200.jpg)

## Summary

About this Component The Pinterest-style Image Grid component lets you display images in three different layouts: Masonry, Grid, and Scattered.

## Description

## 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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #9187

## Details

- **Author**: Shams Digital
- **Price**: $12.00
- **Published**: 2025-11-06
- **Updated**: 2025-11-06
- **Added**: 2025-10-28
- **Categories**: Galleries

## More like this

-   [Infinite Pan Canvas](/component/infinite-pan-canvas) — Aisol Studio · $15 — Endless image wall you can drag
-   [CMS Photo Pile](/component/cms-photo-pile) — Marso Angelov · $10 — Draggable Photo Gallery
-   [CMS Infinity Grid](/component/cms-infinity-grid) — 55N · Free — Boundless exploration.
-   [Endless CMS Reel](/component/endless-cms-reel) — Marso Angelov · $10 — Horizontal Momentum Gallery