如何从列到行重新排序网格组件？

Question

我有一个包含一堆动态元素的列表。我想改变他们自己订购的方式。

这是我所拥有的：

ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
  <li>G</li>
  <li>H</li>
  <li>I</li>
  <li>J</li>
</ul>
  

这是我的预期结果：

我可以通过以下方式实现：

ul {
  grid-auto-flow: column;
  grid-template-rows: repeat(5, 1fr);
}

但是注意这里的

5

很麻烦，因为这个幻数是

li

数的一半。有什么办法让它动态工作吗？让它与任意数量的

li

?

一起工作

我也尝试在

order

上玩

li

但没有成功。有的东西：

li:nth-child(even) {
  order: 1; /* or -1 etc. */
}

我正在寻找一个

CSS

解决方案。我不想依赖

JS

或改变

HTML

.

Answer 1

column-count

应该做的伎俩：

ul {
  column-count: 2;
}

试试看：

ul {
  column-count: 2;
}

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
  <li>G</li>
  <li>H</li>
  <li>I</li>
  <li>J</li>
</ul>