Streaming live at 10am (PST)

[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:



Happy Monday!


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

@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?

@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.

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:

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


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.

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:

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!

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.

You could just use isomorph?

@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: 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:

Thank you so much!

Hi @Marci

Thanks for this tool!

Unfortunately Im getting this error

Any advice?

Thanks in advance!


You are calling the jquery function before the jQuery JavaScript is included.
Solution: Put the code before body (Not before head) = After Jquery is loaded. To get specific answer add live URL.

Thanks for you help @Siton_Systems - That was clumsy of me!

Now it works great! Is there a way I can have same effect as the website that thumbnails transition upwards?

Thanks a lot to @Marci for sharing this with everyone, soooo good!

I’ve implemented it successfully on a CMS collection of txt based elements, however I’m having a bit of trouble with the sorting. I’ve assigned a sorting rule through Webflow’s Designer “number: smallest to largest”. The rule seems to work for the first three elements, but then breaks putting number 5 and 6 before number 4 and so on…

Does anyone have any ideas on what I might be doing wrong? :thinking:

Read-only link
Live link, pw: Sustain4b1l1ty!

PS. I’ve got tha Masonry.js script pasted in “Project settings>Custom code” rather than at page level.

In case it can be helpful to others, I’ve found a solution for my buggy sorting order: see reply marked as “solution” on this thread Masonry.js, issue with collection sorting order

That’s super helpful!!


Hi @Marci - thanks so much for this! Have you created any code for this to work with tabs? I have researched and tried my hand with a couple of things but I am not a coder and am not finding success.
Read-only link.
Live page:

Thank you again!

1 Like