Imagine a list of items where a maximum of four can fit across the width of the available space. Where there are six items, I want it to look like this:
[1] [2]
[3] [4] [5] [6]
Where there are 7 items, I want it to look like this:
[1] [2] [3]
[4] [5] [6] [7]
And where there are 9 items, I want it to look like this:
[1]
[2] [3] [4] [5]
[6] [7] [8] [9]
So while the reading order is standard top-to-bottom, left-to-right, priority is given to filling the bottom rows.
Is there a way to achieve this dynamically? That is, with a CSS solution that will adapt to the number of items and won't require me to set individual styles?