Hi. is it still working fine? 
Do you mind sharing the code?
1 Like
Hi Krubens,
I will do when itās possible.
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 And no problem that its clunky, my life is clunky, so Iām used to it 
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ā¦
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ā¦
1 Like
Thank you! You where right, that is a bit cluncky 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 
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
Enclosed is a link to my page
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?
1 Like
Hi, @JonasPL!
Could you provide read-only link to the project?
1 Like
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?
1 Like