具有无限行的CSS网格垂直列 [英] CSS Grid vertical columns with infinite rows

问题描述

我有一个长度不明的物品清单(来自CMS).我想在垂直向下的2列中显示它们.例如

I have a list of items of unknown length (from a CMS). I want to display them in 2 vertical columns reading down. e.g.

1 4
2 5
3 6

etc...

我正在尝试使用CSS网格实现这一点，但是，除非您预先设置行数，否则这似乎是不可能的.我已经按照 https://gridbyexample.com/examples/example18/尝试过grid-auto-flow: column只需在结尾处添加其他列.

I am trying to achieve this with CSS grid, however, it doesn't seem possible unless you set the number of rows up front. I have tried grid-auto-flow: column as per https://gridbyexample.com/examples/example18/ but this just adds additional columns when it gets to the end.

我觉得网格应该是可能的，但是我找不到办法.有人有什么想法吗?

I feel like this should be possible with grid, but I can't find a way. Anyone have any ideas?

P.S. 请不要建议CSS文本列.

P.S. Please don't suggest CSS text columns.

推荐答案

仅凭CSS网格就无法知道项目的确切数量.

Without knowing the exact amount of items this is not possible with CSS grid alone.

解决此限制的唯一方法是在课程的后半部分添加一个类.

The only way to get around this limitation is to add a class to your second half of the items.

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>

这篇关于具有无限行的CSS网格垂直列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！