Streaming live at 10am (PST)

[Beginner Tutorial] Masonry Layout using masonry.js


#1

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
New JQuery Update Broke Masonry Grid Layout
#2

Thank you! This is very useful...!


#3

@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


#4

@Marci, I have been using this JS for a while now with great results but it seems to have broken with the update to JQuery 3.3.1 that webflow put out recently. The images show but not in the masonry format. Do you have any suggestions on how to fix or workaround this?


#5

@Marci, as a workaround I called an older version of JQuery in the custom code section of the settings.

Here is the site I am using it on (click on Projects and then an individual project to see the grid). As you can see it works now with the workaround but if you take that JQuery 2.2.0 ref out the masonry layout breaks.

https://preview.webflow.com/preview/plusen?preview=b885a89f8d93abcd1ed3e0985c768b4b


#6

Thank’s for the heads up, will look into this and fix the sample page :slight_smile:

@GoldenRatio Someone helped me simplifying the custom code, so it’s working again. Check the updated code-snippet in the How-To section and you can finally get rid of your jquery 2.20 fallback :slight_smile:


#7

Not sure it’s working fully? Some of the images are overlapping near the top.

CloudApp


#8

Hey Mark, i tested on Chrome on Win 10. Did you try other masonry.js demos from the official website? Looks like the slide-in-from-bottom animation get’s messed up.


#9

Due to the async loading behaviour I had to improve the custom code (again).

May you try again if you still see the “overlapping” issue? TY :slight_smile: