Automatic ordering of CMS items?

Hi everyone,

Looking for some help with the CMS grid.

I’ve used some custom code to allow my client to choose how many columns an item spans across in a specific grid. The grid span is 3 columns and they want to display items as either across 1 column, or 3 columns (full width of the page). I’ve used some code to allow this, but as you’ll see from my testing project page linked below, when an item that spans 1 column is in between two items that are full width, it leaves a gap. Is there a way that automatically, any items that are 1 column span will sit next to each other?

Published link (code applied) -

Link - Webflow - Lazarus's Awesome Site

Any support would be greatly appreciated, thanks!

It would require a funky group-sort algorithm. Something that groups your items into 3’s ( a 3, a 2 and a 1, or three 1’s ), and then randomizes those groups.

If you want to automate the layout, you might try a masonry solution instead. The JS there often has features that attempt a “best fit” for the layout space.

Try macy.js-

Hi, thank you for the response!

I’ll try this out and see how it works for my project. Would this solution still allow for cms items to be displayed in an order of ‘last created’ displayed first for example?

Thanks again.

Try it. My guess is that it will depend on the settings you choose.

Either it will follow your ordering exactly and have gape
Or it will follow your ordering exactly and resize items to minimize those gaps
Or it will mostly follow your ordering, but reorder items to minimize those gaps