如何实现仅 CSS 的列类型 HTML 项目布局（2 列，等高）

Question

所以基本上我有任意数量的物品，通常在 5-10 件之间。我想将它们排列成 2 列，高度相同，或者尽可能接近（奇数项）。例如：

1 5
2 6
3 7
4

我绝对不想要的是像这样取决于身高的东西：

1 6
2 7
3
4
5

我知道我可以计算数组的长度并除以二得到第一列的最大索引，如下所示，但我想在 CSS:

中实现

Math.ceil(( ITEMS.length / 2)) - 1; // Input of 9 outputs 4 as the max index

我尝试过使用 Flex 和 Grid，但似乎无法正常工作，但我很可能只是遗漏了一些东西。

Answer 1

多亏了 Pete 的含糊评论（以一种好的方式），我已经弄明白了。

示例如下：

<div class="content-box">
  <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 class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>

.content-box {
  columns: 2 auto;
}

字面意思是CSS一个班轮哈哈

https://codepen.io/anon/pen/aGByjL

如何实现仅 CSS 的列类型 HTML 项目布局（2 列，等高）

How can I achieve a column type HTML layout of items with just CSS (2 columns, equal height)

html

css

grid-layout

flexbox