现在只需要两列，最终可能会有第三列或更多。

<ul>
  <li class="c1">1</li>
  <li class="c1">3</li>
  <li class="c1">2</li>
  <li class="c2">4</li>
  <li class="c1">5</li>
  <li class="c2">6</li>
  <li class="c2">7</li>
  <li class="c1">8</li>
</ul>

列表中的顺序是正确的，现在我们需要两列c1和c2类。我的css是这样的。

ul {
 margin:0; padding:0;
 list-style: none;
 column:2;
 li {
  float: left;
 }
}

使用基本的CSS，我得到了两列，但数量不正确。

------------
|  1  |  5 |
|  3  |  6 |
|  2  |  7 |
|  4  |  8 |
------------

你可能会说，有什么问题，你有两列，是和否，需要的是下面的内容。

------------
|  1  |  4 |
|  3  |  6 |
|  2  |  7 |
|  5  |    |
|  8  |    |
------------

我可以在Xn li之后使用li:nth-child(x)和break，但并不总是相同的，现在我想使用类c1作为float left，使用c2作为float right，但如果有c3，这可能意味着第三列或c4呢？
我已经尝试引导d-flex，col，order，但不工作。
我不擅长用CSS来做这件事，我不喜欢使用JavaScript，但如果只有CSS没有解决方案，那么我会探索这个选项，最后也是最简单的方法是重新做数组输出，并使每列2或3或xn数组（块），这意味着增加代码行数。
谢谢你抽出时间。