CSS Grid：如何实现列表项先左列后右列的自定义顺序排列？

现有如下HTML列表结构：

<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 Grid代码时，元素会按左→右→左→右的行优先顺序排列：

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

需求是让元素先填满左列，再填充右列，且两列元素数量尽可能均分，同时列表项数量是动态的，不能硬编码固定数量的样式。尝试过grid-auto-flow: column但元素横向排列，不符合需求，需要纯CSS解决方案。

方案一：使用CSS多列布局（推荐） #

多列布局天生支持先填充左列再右列的排列逻辑，且能自动均分元素数量，完全符合需求：

ul {
  column-count: 2; /* 分为两列 */
  column-fill: auto; /* 自动填充列，让两列高度尽可能均衡 */
  column-gap: 1.5rem; /* 可选：设置列之间的间距 */
  padding: 0;
  list-style: none; /* 可选：移除默认列表样式 */
}

li {
  break-inside: avoid; /* 防止单个列表项被拆分到两列中 */
  margin-bottom: 0.5rem; /* 可选：设置列表项间距 */
}

该方案无需考虑元素数量，纯CSS实现，且兼容性良好。

方案二：使用CSS Grid实现列优先排列 #

如果必须使用Grid，可以通过grid-auto-flow: column配合固定行数上限（覆盖大部分场景）实现：

ul {
  display: grid;
  grid-auto-flow: column; /* 按列方向排列元素 */
  grid-auto-columns: 1fr; /* 两列宽度均分 */
  grid-template-rows: repeat(20, auto); /* 设置足够多的行数，适配大多数动态数量场景 */
  gap: 0.5rem; /* 可选：设置元素间距 */
  padding: 0;
  list-style: none;
}

注：如果列表项数量超过40个（2列×20行），会自动生成第三列。若需要严格限制为两列，纯CSS无法实现动态行数计算，此时推荐使用方案一。

内容的提问来源于stack exchange，提问作者Jesper Ingels