具有无限行的 CSS 网格垂直列

Question

我有一个长度未知的元素列表(来自 CMS)。我想在 2 个垂直列中向下显示它们。例如

1 42 53 6etc...

我正在尝试使用 CSS 网格实现此目的，但是，除非您预先设置行数，否则这似乎是不可能的。我已经根据 https://gridbyexample.com/examples/example18/ 尝试了 grid-auto-flow: column但这只会在结束时添加额外的列。

我觉得这应该可以用网格实现，但我找不到办法。有人有什么想法吗？

附言请不要建议 CSS 文本列。

Answer 1

在不知道元素的确切数量的情况下，单独使用 CSS 网格是不可能的。

绕过此限制的唯一方法是为元素的后半部分添加一个类。

body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: row dense;
  
  /* extra styles */
  grid-gap: 0.5rem;
}

span {
  grid-column-start: 1;
  
  /* extra styles */
  background-color: #def;
  padding: 0.5rem;
}

.second-half {
  grid-column-start: 2;
  
  /* extra styles */
  background-color: #abc;
}

<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span class="second-half">5</span>
<span class="second-half">6</span>
<span class="second-half">7</span>