Collection list items are skipping empty areas

Design help Layout & Design
1

Hi there,

Got a problem that in my work collection I have items that would skip and leave huge empty areas in between: Works

I know it’s probably because they don’t have a defined height and they start to behave like rows, but the whole point would be, that one could upload various ratio images and it would still nicely work in a grid. A bit like this example where I got the idea from: https://www.bybis.hu/

Any ideas how to solve this?

Thanks!
Jozsef

2

Looks like you’re after a “Masonry” layout - I made a cloneable here: Easy Masonry (Pinterest style layout) - Webflow that should get you the desired effect.

1 Like
3

Hi there,
Thanks a lot, this pretty much solved my problem!
https://benben-39a6b3.webflow.io/works

However, it caused a secondary issue, which now I’m again not sure how to solve:
The order of the items became vertical now. So, for example, If I set them to “newest-to-oldest-published” order, it starts with 1st left up, 2nd left up, then 3rd left up, and only after it would switch to the next column (1st middle up, 2nd middle up), and so on.

I would like it to be in a traditional left-to-right order on the other hand, but I couldn’t find a way around it just yet. Would you have an idea what to do in this situation?

Thanks,
Jozsef