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:


Portfolio Gallery Ideas
#10

I am looking to create a layout on webflow similar to this: Layout

I would like to have the vertical tile instead of horizontal.

If someone can help me with the code it would be appreciated!


#11

Hey Mark, the width of each element is predictable (think in percentage % of the container width).

In your example it’s a (simple) 12 column layout, the first row is 8/4, the second 4/4/4. If you want this in your CMS Collection you probably need to define all these sizes and then activate the correct width per item. There’s definitely no need for masonry.js in this case.


#12

You could just use isomorph?


#13

@Marci Thank you so much for your detailed tutorial. It’s very easy to follow and I can successfully apply the Masonry Layout in my site. Thank You!!!

But one annoying thing is, I’ve noticed the masonry layout is a bit buggy when people open my site at their first time. Please have a try: http://twoinone.webflow.io/ The projects will collapse together and looks awful. But when you refresh the website, the problem will be gone. It will only happen again when you cleared the browser cache.

I would appreciate it if you could help have a look into my project. I don’t see this problem on your example site. It must be something wrong with my site. The read-only link to my project is: https://preview.webflow.com/preview/twoinone?utm_source=twoinone&preview=da8007684b5d4b0df13d9cda229fb0ed

Thank you so much!