MasonryMarvel

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
Support: @gr8pixel