如果有空间，如何垂直将div浮动到下一个

Question

我得到了从api加载的帖子数组，然后显示在视图上。因此其动态内容。帖子的高度取决于内容，因此我需要在2列中无行显示它们。因此，宽度是固定的，高度不是固定的。现在看起来像这样：

我的代码基本上是这样的html：

<div class="posts-wrapper">
   <div class="post" *ngFor="let post of posts">
   </div>
</div>

scss：

.posts-wrapper {
     display: flex;
     flex-wrap: wrap;
     .post { 
            padding: 7px;
            width: 49%;
            height: 100%;
            margin: 0 auto 10px;
            background-color: #fff;
            border: 1px solid #c2cfd6;
     }
}

我要完成的工作是将div 3提升到div 1 ...帖子的高度未定义，未知，因此它应该在哪个列帖子中未知。它应该自己漂浮，就像流到垂直找到第一个空白空间的那一边一样。

编辑：：也许会有更好的解释。下一篇文章将放置在高度较小的列中，如果左侧的列均匀，则将其前进。

所以布局看起来像这样：

尝试使用谷歌搜索，但是我什至不知道该对Google做什么，这是什么样的布局。无论如何，我们对任何帮助，匹配，关键字都表示赞赏。