Webflow Layout Techniques

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