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

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

我觉得我很接近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>

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

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>