CSS 网格：如何以自定义的左右顺序排列项目？

Question

情况

我有一个列表，其中的元素已按顺序排序：

<ul>
  <li>1 element</li>
  <li>2 element</li>
  <li>3 element</li>
  <li>4 element</li>
  <li>5 element</li>
  <li>6 element</li>
  <li>7 element</li>
  <li>8 element</li>
  <li>9 element</li>
  <li>10 element</li>
  <li>11 element</li>
</ul>

当我使用 CSS 网格并将项目分成两列时，它们会自动向左、向右、向左、向右等排序。

ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

问题

我希望这些项目首先填充左列，然后填充右列。使用 CSS 网格，它们也应该在两列中平均划分。 输出应如下所示：

您可以在这里测试它：codepen
我正在寻找一个动态解决方案：列表元素的数量可以是动态的，所以说“正好 6 个元素之后你必须跳到右列”不是我想要的。

我尝试过的事情

我尝试使用

grid-auto-flow: column

，但随后项目只是水平放置：

有谁知道如何仅使用 CSS 解决这个问题？

Answer 1

如果不指定行数，这在 CSS-Grid 中是不可能的。

ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-auto-flow: column;
  width: max-content;
  column-gap: 30px;
  border: 1px solid black;
}

<ul>
  <li>1 element</li>
  <li>2 element</li>
  <li>3 element</li>
  <li>4 element</li>
  <li>5 element</li>
  <li>6 element</li>
  <li>7 element</li>
  <li>8 element</li>
  <li>9 element</li>
  <li>10 element</li>
  <li>11 element</li>
</ul>

对于等分列，您需要使用 CSS 列和

column-count

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

ul {
  display: inline-block;
  list-style: none;
  column-count: 2;
  margin: 1em;
  border: 1px solid grey;
}

<ul>
  <li>1 element</li>
  <li>2 element</li>
  <li>3 element</li>
  <li>4 element</li>
  <li>5 element</li>
  <li>6 element</li>
  <li>7 element</li>
  <li>8 element</li>
  <li>9 element</li>
  <li>10 element</li>
  <li>11 element</li>
</ul>