---
title: "MasonryMarvel — Framer component · Best of Framer"
description: "$5.00 · Framer component · by gr8pixel · Galleries. Summary MasonryMarvel builds responsive, Pinterest-style galleries from your canvas frames, images, and videos."
canonical: "https://framer.elliotli.dev/component/masonrymarvel"
---

[Home](/)/[Components](/components)/[Galleries](/components/category/galleries)/MasonryMarvel

# MasonryMarvel

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

![MasonryMarvel preview image 1](https://framer.elliotli.dev/og/component/masonrymarvel/a3cbacc37c6b1106/1600x1200.jpg)

## Summary

Summary MasonryMarvel builds responsive, Pinterest-style galleries from your canvas frames, images, and videos.

## Description

## Summary

MasonryMarvel builds responsive, Pinterest-style galleries from your canvas frames, images, and videos.

-   Items auto-measure and scale to fit column widths with perfect spacing
    
-   Supports custom column counts and breakpoints for different devices
    
-   Maintains left-to-right reading flow if desired
    
-   No need for equal-height tricks or scrollbars; it adapts automatically
    

## Highlights

-   🧩 **Drop-in & linkable**: Connect any Frames/Images/video via the Items control (like Framer’s Ticker).
    
-   🧮 **True Masonry**: Auto-sizes by content; items keep their aspect ratios—no forced equal heights.
    
-   📱 **Responsive**: Separate column counts for Desktop, Tablet, and Mobile with custom breakpoints.
    
-   ↔️ **Pixel-perfect gutters**: Exact **Column gap** and **Y space** between items.
    
-   🔀 **Horizontal order option**: Keep left-to-right reading order or pack into the shortest column.
    
-   💨 **No scrollbars**: Component sizes itself; columns are fluid and center-aligned.
    
-   🛠️ **Performance-friendly**: Uses _ResizeObserver_ to measure only when needed.
    

## How to use

1.  **Add MasonryMarvel** to your canvas.
    
2.  **Link items**: In the right panel, open **Items** and add any Frames/Images/videos from your project.
    
3.  **Set columns**: Choose **Columns (Desktop/Tablet/Mobile)** for your desired breakpoints.
    
4.  **Tune spacing**: Adjust **Column gap** (x-gutter) and **Y space** (vertical gutter).
    
5.  **Choose ordering**: Toggle **Horizontal order** to keep L→R flow or turn off for pure shortest-column packing.
    
6.  **Preview**: Resize the canvas or preview in the browser—columns reflow fluidly with consistent gutters.
    

## Component props explained

-   **Items (Array of Component Instances)**Frames/Images to display. Order affects layout (especially with **Horizontal order: On**).
    
-   **Column gap (Number)**Horizontal spacing between columns, in pixels.
    
-   **Y space (Number)**Vertical spacing between stacked items, in pixels.
    
-   **Columns (Desktop / Tablet / Mobile) (Number)**Column count per breakpoint. The component chooses which to use based on the breakpoints below.
    
-   **Tablet ≤ (px) (Number)**Viewport width at or below which the **Tablet** column count is used.
    
-   **Mobile ≤ (px) (Number)**Viewport width at or below which the **Mobile** column count is used. _(Desktop columns are used above Tablet ≤ px.)_
    
-   **Horizontal order (Boolean)On**: Items flow left-to-right (1st column, 2nd column, …) for a stable reading order.**Off**: Items always drop into the current shortest column for the tightest packing.
    

## Tips

-   For best results, link items that already have their intended aspect ratios (images, frames, or video with content).
    
-   You can animate linked items individually (hover, entrance, etc.)—MasonryMarvel preserves them as children.
    
-   If you change an item’s size, the grid re-measures and snaps to perfect gutters automatically.
    

Poster credits: [Mercedes Bazan](https://www.behance.net/mercedesbazan)  
Support: [@gr8pixel](https://www.framer.com/@gr8pixel/)

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

-   All · #10490

## Details

- **Author**: gr8pixel
- **Price**: $5.00
- **Published**: 2025-10-06
- **Updated**: 2025-10-06
- **Added**: 2025-09-30
- **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