tacit wolf
Is it possible to use pure CSS to pack a container of elements as tightly as possible? I have a list of music artists with different length names in a scroll container and I want to try and arrange them such that they pack nicely and minimise the horizontal space either side of them.
Was wondering if this is something that could be done with CSS grid, perhaps? I played around with grid-auto-flow but having made any headway
looks like CSS grid can do it if you define the widths of elements with stuff like grid-column: span 2 but I was looking for a way to use the computed width of an element
dim heart
Does the order of the artists matter? Or are you saying you want the artists rearranged such that the space is minimized?
This problem kind of reminds me of what https://github.com/shuding/react-wrap-balancer does actually
tacit wolf
Does the order of the artists matter? Or are you saying you want the artists rea...
the final order of them doesn't matter at all, no :) just want to minimise wasted space
tacit wolf
This problem kind of reminds me of what https://github.com/shuding/react-wrap-ba...
yeah I was hoping I might be able to find something similar for generic components :P
maybe I should look into making one
urban roost
Have you tried flex and flex-wrap?