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
https://www.webflow-tools.refokus.com/tools/masonry-layout
https://forum.finsweet.com/t/mansonry-grid-that-will-work-with-cms-filter/1825/2?navigation_menu=null
