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?
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.
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?
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
