使用 css 网格将未知数量的项目分成两列，但按列顺序列出

Question

我有一些项目要分成偶数两列。

我有一个例子here

所以我有很多东西..

#parent {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: row;
}

.item {
  margin: 5px;
  height: 40px;
  width: 50px;
  background: green;
  color: white;
}

<div id="parent">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

这给了我

但我想要的是让项目在列中“流动”，即它们将按顺序排列

 1        4
 2        5
 3        6

我认为属性 grid-auto-flow 可以做到这一点，但我无法让它完成我想要的

有没有简单的方法可以做到这一点（最好使用 css 网格）？

Answer 1

它不一定是最新的布局技术；有时已经有专门为完成手头工作而创建的旧版本。

也就是说，考虑使用 columns，它可以满足您的需求，开箱即用：

#parent {
  columns: 2;
}

.item {
  break-inside: avoid;
  margin: 5px;
  height: 40px;
  width: 50px;
  background: green;
  color: white;
}

<div id="parent">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
</div>

重要旁注： 正如@Yousaf 所指出的，这可能导致单个项目被分散到两列，因为浏览器试图确保两列都是关于同样的高度。为避免这种情况，只需使用

break-inside: avoid;

列项目。

使用 css 网格将未知数量的项目分成两列，但按列顺序列出

Use css Grid to divide unknow number of items into two columns, but list in column order

css

css-grid