html - 可能在两列中有元素，并且每一行不影响该列中相邻行的高度

Question

我尝试使用 flexbox 和 grid，但是当文本换行时，两者都会导致相邻行的高度增加。

理想情况下，我想保持 HTML 简单，如下所示：

<div>
 <div>1</div>
 <div>2</div>
 <div>3</div>
 <div>3</div>
 <div>5</div>
</div>

我希望第一列先填满，然后再填满第二列。

| 1 | 4 |
| 2 | 5 |
| 3 |   |

我知道一种解决方案是将数据拆分为两个数组，并有两个独立的列堆叠。但是，我想知道是否有一个纯 CSS 解决方案可以获得相同的预期结果？

---

更新

代码示例：https ://codepen.io/labithiotis/pen/RwrYJyr

标签： htmlcssflexbox