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

【问题标题】：What is the best way to create an asymmetrical two-column grid with dynamic content?创建具有动态内容的不对称两列网格的最佳方法是什么？
【发布时间】：2015-11-05 19:06:54
【问题描述】：

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

我当前解决方案的代码：

.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;

【问题讨论】：

标签： html css flexbox multiple-columns

【解决方案1】：

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

您可以使用align-items: flex-start 使每个弹性项目仅拉伸到足以包含其内容。但是，正如您所指出的，这不会改变行的高度，结果是项目之间出现大量垂直空白。

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

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

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

【讨论】：

我希望避免使用 Masonry，但这似乎更像是要走的路，特别是考虑到我想以 Z 模式订购（左上角 --> 右上角--> [下一行]-左 --> 等等）。非常感谢，迈克尔！