About 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
Add MasonryMarvel to your canvas.
Link items: In the right panel, open Items and add any Frames/Images/videos from your project.
Set columns: Choose Columns (Desktop/Tablet/Mobile) for your desired breakpoints.
Tune spacing: Adjust Column gap (x-gutter) and Y space (vertical gutter).
Choose ordering: Toggle Horizontal order to keep L→R flow or turn off for pure shortest-column packing.
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
