具有列顺序的响应式多列列表

Question

我正在尝试创建一个有序的多列列表,但我正在努力与CSS网格布局规则.

期望的结果应该是敏感的.在小屏幕上2个网格列,在大屏幕上最多4个,同时保持列顺序.

而不是像这样订购:

1  2  3  4
5  6  7  8
9  10 11 12
13 14 15

他们应该像这样订购:

1 5 9  13
2 6 10 14
3 7 11 15
4 8 12

我觉得我很接近这个小提琴.

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>

特别是,我正在努力解决这些问题:

a)grid-auto-flow: column需要使列包装工作,但也强制我添加grid-template-rows: repeat(5, 1em)以指定行计数,这会破坏响应性.有没有办法根据内容和列数自动计算行数？

b)为什么列宽度不均匀分布,为什么它们不适应屏幕尺寸？这不是minmax为了什么？

Answer 1

调整列数以更改列数:)

ol {
  margin: 0;
  padding: 0;
  list-style: none;
  /*---*/
  column-count: 4;
  column-gap: 0;
  width: 100%;
}

li {
  background-color: grey;
  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>