创建具有动态内容的非对称两列网格的最佳方法是什么？

Question

我有动态内容流入两列网格。 Flex box 是一个很好的解决方案，但它强制行具有相同的高度，当内容更多时会产生一些尴尬的白色 space。有谁知道可以实现下图中希望清楚传达的内容的轻量级解决方案？

我当前解决方案的代码：

.grid-container {
  display:flex;
  flex-wrap: wrap;
  justify-content:space-between;
  height:auto;
  height:700px;
  overflow-y:scroll;
}
.contained-cell{
  width:48.5%;
  padding:40px 20px;

Answer 1

在您的代码中，弹性项目默认排成一行 (flex-direction: row)。而且默认情况下，弹性项目将伸展以占据容器的全部可用高度（align-items: stretch）——从而创建等高的列。

您可以使用 align-items: flex-start 使每个 flex 项目仅伸展到足以包含其内容的程度。但是，正如您所指出的，这不会改变行的高度，结果是项目之间有很多垂直的白色 space。

此布局的标准解决方案是 jQuery Masonry，正如他们在其网站上所写， 的工作原理是根据可用的垂直 space 将元素放置在最佳位置，有点像就像泥瓦匠在墙上安装石头。 这是一种选择。

保持 CSS，然而，另一个 flexbox 解决方案正在将 flex-direction 从 row 更改为 column。使用此设置，等高行不适用，垂直白色space 不是问题，每个弹性项目都可以有自己的高度。

这是一个演示：http://jsfiddle.net/8rq0maL4/1/

创建具有动态内容的非对称两列网格的最佳方法是什么？

What is the best way to create an asymmetrical two-column grid with dynamic content?

html

css

multiple-columns

flexbox