- All elements have the same width
- Elements have a height that cannot be calculated server side (an image plus various amounts of text)
- I can live with a fixed number of columns if I have to
there is a trivial solution to this that works in modern browsers, the
The problem with that solution is that elements are ordered in columns:
While I need the elements to be ordered in rows, at least approximately:
Approaches I've tried that don't work:
Now I could change the server side rendering and reorder the items dividing the number of items by the number of columns, but that's complicated, error-prone (based on how browsers decide to split the item list into columns), so I'd like to avoid it if possible.
Is there some newfangled flexbox magic that makes this possible?