Webflow Masonry grid ( #Pinterest), no Custom Code required

Hi. is it still working fine? :slight_smile: Do you mind sharing the code?

1 Like

Hi Krubens,

I will do when it’s possible. :slight_smile:
Having a bit of a difficult time at the moment.
I warn you though, it’s a clunky way - but it still works…

2 Likes

Sorry to hear that! Take your time :slight_smile: And no problem that its clunky, my life is clunky, so I’m used to it :smiley:

1 Like

@sabanna @vincent It seems like the downside of this hack is that you’ll only get three columns when you have five items or more. Less than five items will result in two columns only.

Any workarounds?

1 Like

In other words, the direction is from top to bottom and not from left to right, like it should be.

1 Like

Hi, @Sebastian_Zimmer!

This particular method will always give the direction from top to bottom, because it uses CSS Columns. The direction from left to right can be done only with JS plugins.

1 Like

Hi Krubens,

Just a quick reply… :slight_smile:
If you’re still interested after reading this I will post more info+code.

What I have done to make the Masonry grid list from left to right instead of top to bottom is as follow:
WARNING - cluncky way

Desktop view:
Made a flex box (or use grid) with 3 columns. In each colomn I have a collection list pulling data from the same collection (your images).
First column/collection list is set to only display every 3 image starting with 1 image (list item start: 1)
Second column/collection list is set to only display every 3 image starting with 2 image (list item start: 2)
Third column/collection list is set to only display every 3 image starting with 3 image (list item start: 3)
All collection lists are set to display only in desktop view and use the same custom code for all 3.

Ipad:
Made a flex box (or use grid) with 2 columns. In each colomn I have a collection list pulling data from the same collection (your images).
First column/collection list is set to only display every 2 image starting with 1 image (list item start: 1)
Second column/collection list is set to only display every 2 image starting with 2 image (list item start: 2)
All collection lists are set to display only in ipad view and use the same custom code for both.

Mobile:
Made 1 column. Show all images.
All collection lists are set to display only in mobile view (no code needed)

Works best with sort set to newest added.
If you want to control order you can make a number field in the collection to control the listing with sort order set to A-Z.
Because of custom code it doesn’t show correctly in designer. Only when published.
In editor however, it shows OK.

You can take a look here…

https://preview.webflow.com/preview/peter-jarvad?utm_medium=preview_link&utm_source=designer&utm_content=peter-jarvad&preview=5dd459fbc1061e62826710c4413b27b1&mode=preview

1 Like

Thank you! :slight_smile: You where right, that is a bit cluncky :smiley: But glad you shared it so I know there is a way if the right client comes along.

Thank you so much for taking you time to write this out!

1 Like

I’m very new to Webflow. I’m trying to recreate this effect but I’m not sure how to set it up. I added a paragraph element to a section then added the 4 columns to the text but I can’t add a photo or anything else to the paragraph element. What am I do wrong? Is there a step by step tutorial on how to set up a masonry grid?

1 Like

Hey I’m sorry, never mind. I found the video about half way through the comments showing how to set it up. Thanks!

1 Like

Hello, is there a way to make them go horizontally (1 2 3 4) instead of vertically?

1 Like

Only with specific jQuery plugin :woman_shrugging:

1 Like

Hey Sabanna,

I really loved the tutorial and found this incredibly helpful in designing a lovely masonry grid layout for the folio page of my website. However, I keep running into an issue when the page is viewed in Safari. Everything works perfect and all the columns display fine on chrome, firefox, edge etc but I keep getting consistent issues with Safari where only the left column will render.
PLEASE help :slight_smile:

Enclosed is a link to my page

https://preview.webflow.com/preview/bsa-home-page?utm_medium=preview_link&utm_source=designer&utm_content=bsa-home-page&preview=de17651a8f40f71291e0078d5775b95a&pageId=5e5ca695512f4e33cbae0b2f&mode=preview

1 Like

UPDATE: I appear to have fixed it by changing the container wrapper for the images from a flex-box to a normal block element.

3 Likes

I want to have a masonry layout in my collection list. Every collection item consists of a div with video module and tekst beneath it.

I used the column way to achieve this, but whatever I do it’s only the first column that loads the video urls. So weird. I’ve tried to change the limit and other things, but whatever I do, video urls will not load in the second or third column - only in the first.
The video modules load the urls just fine if I switch to flexbox, grid or something else, or if the item is in the first column.!

What am I doing wrong? Is it a bug?

Screenshot 2020-09-23 at 11.31.16|664x500

1 Like

Hi, @JonasPL!
Could you provide read-only link to the project?

1 Like

Sure thing:
https://preview.webflow.com/preview/content-der-konverterer?utm_medium=preview_link&utm_source=designer&utm_content=content-der-konverterer&preview=ec37cf0e9c8ad4961f9d0471b5ce76ec&pageId=5f6ca65fcea246c0bf5b0513&mode=preview

For some reason, I also have an issue with the display inline-block trick on items. Doesn’t seem to work for me.

I’m also including the published link as it looks a little different from the preview:
https://content-der-konverterer.webflow.io/collection-masonry-test

1 Like

Hey, Jonas!

I did some research and found out that <iframe> elements are not working properly when they are in the div with CSS-columns in Chrome based browsers. It is not Webflow problem, but general browser issue. And, since all embed videos actually get rendered inside the iframes, you are experiencing this problem with video blocks.

So far, I wasn’t able to find a solution. Whatever CSS tricks I found suggested on the internet didn’t work.

You will need to either use the different approach for the layout (different layout, JS masonry plugin, etc) or use images (thumbnails) instead of actual videos on that page.

1 Like

Hey Sabanna

Thank you for the deep digging in css tricks. Sad to hear that what I’m trying to achieve with collection lists and video elements isn’t possible with css alone.

I’ve imported the masonry JS and it works fine on the first tab (I’m using tabs to filter out categories) but on every other tab than the first one, it looks like only some padding are recognized by the tab-pane. Do you have any idea why?

You can take a look here: https://content-der-konverterer.webflow.io
And the preview link: https://preview.webflow.com/preview/content-der-konverterer?utm_medium=preview_link&utm_source=designer&utm_content=content-der-konverterer&preview=ec37cf0e9c8ad4961f9d0471b5ce76ec&mode=preview

1 Like

Hey, this is a really handy workaround and I think I’m pretty close to getting it implemented on my site but the tags don’t seem to be amending my list to show every 2nd image.

Is there any chance you could take a look for me?

https://preview.webflow.com/preview/the-creative-industries?utm_medium=preview_link&utm_source=designer&utm_content=the-creative-industries&preview=62543e7ea7b07e70175890918116f872&pageId=5fa51ef8cdfd449a9e892cca&mode=preview

1 Like