Masonry ✅

A masonry grid designed specifically for image layouts.

Part of the Sygnal Components library.

Goals;

• Easy masonry drag-and-drop setup

• Dynamic column count

• Realtime designer configuration, see it exactly as it will publish

• CMS support, combine both collection lists and static elements

• Responsive, on column count

Demonstration

Masonrywebflow-core-component-test.webflow.io

Properties

Columns	Number, 1-12
Margin X	Number, integer	Horizontal margin between columns.
Margin Y	Number, integer	Vertical margin between items.
Tablet Columns	Number, 1-12
Mobile Landscape Columns	Number, 1-12
Mobile Portrait Columns	Number, 1-12
True Order	Boolean
Wait For Images	Boolean
Debug	Boolean	Will output console log messaging when on.

Technical Notes

Based on Macy.js

Future

Non-image items, e.g.;

• Cards containing text layouts

• Lightbox support

• Possible load more / infinite load support https://www.reddit.com/r/webflow/comments/1np6ud0/comment/nfxd12i/