[Beginner Tutorial] Masonry Layout using masonry.js


While trying to build a real masonry layout (also called Pinterest layout) using Webflow and pure CSS i gave up...the masonry hacks using CSS columns will build a fake-layout (vertical orientation) which might be okay but is useless to me so don't fall for this when searching for masonry layout css :smiley:

Instead, I decided to give masonry.js a try as it only adds 5 lines of custom code to your Webflow project, super easy to integrate even for beginners.

FYI: Inside Webflow Designer, the Masonry Grid doesn't work, it's just a normal flex grid with equally sized rows as a reasonable fallback.

Check it out and scroll down for the How-To:

Live-Version: http://thinking-twins.webflow.io/masonry-layout

Share-Link: https://preview.webflow.com/preview/thinking-twins?preview=d12008f3a694d82e523d74ac4d2413ea

Happy Monday!

How to make a fluid grid from a collection list
Masonry grid help

Thank you! This is very useful...!


@Marci, thank you for this perfect tutorial! Works and looks great. Curious if you have any good ideas for how best to link each of the items in the collection so that if a user clicks on that image they get a lightbox with the larger size and the could cycle back and forth through them all.

The Webflow lightbox is for static content hence the dilemma. Or at the least have the image you click on lightbox to a larger size with an X if you can’t scroll.

You can see the project I am working on here http://plusen-designs-2017.webflow.io/project/persimmon-tree-residence