使用动态内容创建不对称双列网格的最佳方法是什么？

Question

我有动态内容流入双列网格。 Flex框是一个很好的解决方案，但它强制行高度相同，当一个内容更多时创建一些尴尬的空白区域。有没有人知道一个轻量级的解决方案，可以实现在下面的图像中明确传达的内容？

我当前解决方案的代码：

.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项会在一行中对齐（flex-direction: row）。并且默认情况下，弹性项目将拉伸以占据容器的完整可用高度（align-items: stretch） - 从而创建相等的高度列。

您可以使用align-items: flex-start使每个弹性项目仅足以包含其内容。但是，正如您所指出的那样，这并没有改变行的高度，结果是项目之间有很多垂直的空白区域。

这种布局的标准解决方案是jQuery Masonry，正如他们在网站上所写的那样，通过根据可用的垂直空间将元素放置在最佳位置来工作，有点像石匠在墙上贴石头。这是一个选择。

然而，保持CSS，另一个flexbox解决方案是将flex-direction从row更改为column。通过这种设置，相同的高度行不适用，垂直空白不是问题，每个弹性项目都可以是它自己的高度。

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