# Masonry ✅

{% hint style="success" %}
Part of the **Sygnal Components** library. 
{% endhint %}

Goals;

* [x] Easy masonry drag-and-drop setup
* [x] Dynamic column count
* [x] Realtime designer configuration, see it exactly as it will publish 
* [x] CMS support, combine both collection lists and static elements 
* [x] Responsive, on column count 

## Demonstration

{% embed url="<https://webflow-core-component-test.webflow.io/layouts/masonry>" %}

<figure><img src="https://2784689242-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fijt1q5GHhhw4y4FjjPNG%2Fuploads%2Fb7DapuYBeQ6kJ444JhJl%2Fimage.png?alt=media&#x26;token=6a085f6c-0481-485f-8e76-ca99ce743939" alt=""><figcaption></figcaption></figure>

## 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&#x20;

## Future&#x20;

Non-image items, e.g.;&#x20;

* Cards containing text layouts&#x20;
* Lightbox support&#x20;
* Possible load more / infinite load support \
  <https://www.reddit.com/r/webflow/comments/1np6ud0/comment/nfxd12i/>