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
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.
@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.
@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
@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
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.
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.
@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: Webflow - Twoinone Studio
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 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…
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: http://geoffreedphoto.webflow.io/portfolio-test
