I’m hoping someone might be able to point me in the right direction. I’ve got a fairly simple grid of flex items where the height is set to auto but they have varying widths 33%, 50%, 67%, 100% and wrap to the next row.
This is all good when the items are in the right order. But what I’m trying to achieve is a way to shuffle the items into an order which fits when they’re added to the page randomly.
Example, a list of items 50 | 33 | 67 | 50 | 100 might be reordered to 50 | 50 | 67 | 33 | 100 so each row uses up the most horizontal space it can. I might have a list of 100 or so items, and it would also be nice to mix them up a bit and not have say 10 50% width items all together, but some rows of 33 | 33 | 33 or 33 | 67 mixed in between them.
I can’t think of a way to do this using CSS alone. So I’ve been looking at various JavaScript libraries, but they all seem to be focused on shuffling items of varying height and a fixed width.
I don’t need to change the display or position of the items, just the order based on their widths, so maybe I’m overthinking it and something like putting them into an array and sorting that would work better.
Any help would be much appreciated! 🙂
2
Answers
For anyone interested I've found CSS grid does this perfectly using
grid-auto-flow: dense:My bad, I assumed CSS couldn't do it and went down the Javascript route too quickly.
It depends on how you want to do it, but I doubt there will be a library for this. It seems like a very specific scenario. I am not 100% sure what you want your outcome to be, but what I would do if I were you is create a function that automatically sorts these programmatically. It could work something like this:
Get a reference to each element you want to sort and group these by type. You could have an array for each of the element widths that are 50%, 67%, 33% or any other one you want to have.
Use a while loop to go through these elements and move them to a result array of what you want your final order to be. Your condition could be something like "while any of these width arrays has elements".
On each iteration of the while loop, move elements from the width arrays to a final result array of what you would consider to be the optimal order for these. Here it gets tricky because the way you decide where to put these depends on what you want to see. A simple rule could be something like: "if we have 2 elements that can add to 100% (50% +50% or 67% + 33%) then take the elements from whichever array has the most elements. Else, take the single element that has the highest % number and move it from the width arrays to the result array.
Use the references to each element to update the DOM to match your desired order that you have recorded in the result array.