Below is an image of the visual style that I am aiming to achieve at two different dimensions. The content is prioritised and filled into equal-width columns starting at the top-left, then entire top row, and then the next available highest space.
I can see how this could be designed using JavaScript and ResizeObserver, but this feels like something that should be possible using pure css, perhaps using some combination of grid and flexbox.
When using grid, setting the parent to grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); with child elements width: 100%; achieves the desired column behaviour that I am looking for, but forces the elements to be equal-height.
Flexbox can solve that problem by displaying elements in a column that then wraps to fill other columns (like this example), but that would disrupt the priority order that I require.
Something else I have considered is using a css variable to define the width of the child elements, but that seems to result in a similar height spacing issue as using grid.
Pinterest and NewTumbl both have this layout on their dashboard view, however from what I can tell from analysing their site using Chrome Dev Tools they achieve this using JavaScript.
Does anybody know if this is possible using pure css, or if I'm barking up the wrong tree?
