Collection List Layout Issue

Hello,

I have a 3 column collection list on the page I am sharing. When I apply sorting to it, elements don’t flow from left to right. Instead, they flow from right to left as you can see.

If I apply Random Sorting, the problems gets fixed - but I don’t want random sorting. I want to sort my collection items by date created.

Thank you for your help :slight_smile:


Here is my site Read-Only: ideatoapp.io/blog
(how to share your site Read-Only link)

Hi @Bahaa

Thanks for the published link, can you also provide your read-only link - that way we can take a look at your structure and settings to give the best advice:

Here is my read only link. It’s on the blog page. Thank you for your reply.

https://preview.webflow.com/preview/ideatoapp?preview=73d8bd69736d989189c3e76c9fb1f958

Hi @Bahaa,

I had a look at your project. I doesn’t seems to come from the ordering of your collection list.

From what I understand the column layout will add the next element to the shortest column (in this case the right one) to avoid having a very long column compare to others one if the elements are different sizes.

If you were setting a fixed height to you collection list item it will flow the normal way but it is not the purpose of your design.

My preferred solution in this case is to use flexbox instead. As follow:

1- setup your column layout to full width
2- setup the collection list to flex horizontal and enable wrap children
3- setup the collection item to width = 100/3% (you can write that in the field as webflow will do the math for you)

That will normally give you the result you expect.

The only thing missing will be the gutters that you can achieve by
1- adding padding on 4 sides to collection items
2- adding negative margin on 4 sides (same as padding) to the collection list to compensate for the surrounding gutter

This is the way I go and I hope it will be a solution for you as well.

Max

3 Likes

Thank you @Maximosaurus! This worked perfectly. I really appreciate it :slight_smile:

1 Like

Glad I could help :wink: