Masonry Grid Layouts

Basic masonry grid layouts are a columnated layout in which each item has a variable height. This was first popularized by Pinterest but has become a favorite layout for photo galleries and card-style layouts worldwide.

There is also an advanced masonry grid layout which has the added characteristic that an individual item can span columns. However this is uncommon as it easily disrupts the tidy layout a masonry grid is famous for.

CSS-only Approach

You can implement an efficient masonry using CSS-only if you are OK with the flow of items running downward first, and then across second, like a newspaper article would read.

This is accomplished using CSS columns.

Custom code-

http://forum.webflow.com/t/masonry-grid-pinterest-in-webflow-created-by-css-only/21693

CSS-only-

https://discourse.webflow.com/t/webflow-masonry-grid-pinterest-no-custom-code-required/23551/77

Macy.js Approach

Masonry.js was one of the first to support masonry layouts, however it is not as robust and does not work smoothly with images of varying sizes.

Macy.js is a more modern variant which is far more robust.

• It is easier to implement in Webflow
• It is generally smoother in its layout operation
• It has no dependencies, including jQuery
• It is better with unknown-size images
• It responsively supports varying column counts at different breakpoints

Example code;

• Create a collection list of your elements
• On the collection list element ( the middle one of the 3 ), add an ID of _{macy-container}.
• Add this custom code in the /body custom code section of your page

Cloneable Demo

Philipp Roth put together a cloneable demo of Macy.js here;

https://webflow.com/made-in-webflow/website/Masonry-Layout-with-Macyjs

While it might not be immediately obvious, you can make the designer view look representative of the Macy.js view. For example if you've configured Macy for 3 columns, you can set your collection list to a 3 column grid to look similar. Macy seems to handle this fine.

More Notes

http://macyjs.com/

https://github.com/bigbite/macy.js

https://codepen.io/memetican/pen/YzdqrVO/05f208fee2c695b965be9dcc9c9d0a3e?editors=0010

More notes

Other Libraries;

Packery

https://packery.metafizzy.co/

Refokus Masonry

https://www.webflow-tools.refokus.com/tools/masonry-layout

Finsweet CMS Filter Notes

https://forum.finsweet.com/t/mansonry-grid-that-will-work-with-cms-filter/1825/2?navigation_menu=null

‍

‍