CMS list is sorted vertically, not horizontally

Hi everyone,

I am using a collection list on my “work” page with three columns and an adjusted version of that same list on our homepage. To put them in the right order I have numbered the collection items. On the homepage it now shows correctly. However on the Work page it seems that the items are sorted vertically and not horizontally. How can I change this? Numbering these will otherwise become really confusing as I would have to adjust the numbering every time I add a project…

Any help would be greatly appreciated! I have added my preview link below.


Here is my public share link: https://preview.webflow.com/preview/saga-new?utm_medium=preview_link&utm_source=designer&utm_content=saga-new&preview=c3a4c50b2a620f350e3dfb5378b20351&pageId=5fe4abd13b1e0fde21d692b0&mode=preview

I don’t see a sort difference between pages. Normally you would want to use a number field (0-1000) for sorting and that gives you plenty of options to control order.

Hi Jeff
Please check the Work page. I have created a sort column in the CMS and labeled them from 1 upward like you said, and then sorted them from A-Z. The problem however is that the projects on the Work page are sorted vertically, and then moves to the second column. So the top left project is number 1, and then the second column is number 5 and the top right is number 8. Does that make sense? I just want it to go 1-2-3 when looking at it from left to right.

You can’t change the order when using CSS columns. A column is just that. You can either use flexbox or if you want to maintain a masonry type layout I suggest Isotope by Metafizzy which supports horizontal (rows). Your site would need a commercial license.

Hi @webdev
I’m afraid that looks like I would need to use code and I’m not a developer so I’m not really comfortable doing that. Is there no other way to create a masonry grid in webflow with collection items?