I am trying to create an ordered multi-column list, but am struggling with CSS Grid layout rules.
The desired outcome should be responsive. On small screens 2 grid columns, on larger screens up to 4, all while maintaining a column order.
Instead of being ordered like this:
1 2 3 4
5 6 7 8
9 10 11 12
13 14 15
They should be ordered like this:
1 5 9 13
2 6 10 14
3 7 11 15
4 8 12
I feel I am close with this fiddle.
ol {
margin: 0;
padding: 0;
list-style: none;
background-color: grey;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(33.333%, 50%));
grid-auto-flow: column;
grid-template-rows: repeat(5, 1em);
}
li {
outline: 1px solid orange;
}<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
</ol>Especially, I am struggling with these points:
a) grid-auto-flow: column is required to make the column wrapping work, but also forces me to add grid-template-rows: repeat(5, 1em) to specify a row count, which breaks the responsiveness. Is there a way to calculate the row count automatically based on content and column count?
b) Why are the columns widths not evenly distributed and why don't they adapt to the screen size? Isn't this what minmax is for?