CSS显示html内容，如Windows 8应用程序网格

我喜欢Windows应用商店应用程序网格的外观，并尝试使用标准的web技术（IE10及以上、FF、Chrome、Safari）重新创建网格。Windows应用商店应用程序中的网格垂直滚动，内容被拆分为列，您必须自上而下阅读

到目前为止，我有一个以固定高度水平滚动的div：

.scroll-horizontal {    
   overflow-x:scroll;
   overflow-y:hidden;
   white-space: nowrap;
}

这很好，但子元素扭曲存在问题。他们通常在对方下面排成一行。但是如果达到元素的高度，我需要它们换行到下一列。以下是我想要存档的内容的图片和图像：

如何使用CSS将子元素包装成Windows 8应用程序网格

请参阅。它将满足您的所有需求，因为在这里编写整个css需要时间。

找到了一个解决方案：CSS3如果内容达到某个元素的高度，就让内容包装起来：

    -webkit-column-fill: auto;
    -webkit-column-width: 320px;
    -webkit-column-gap: 32px;
    -moz-column-fill: auto;
    -moz-column-width: 320px;
    -moz-column-gap: 32px;
    column-fill: auto;
    column-width: 320px;
    column-gap: 32px;

---

用纯CSS我不相信你能。您将需要JS（/JQuery）来计算适合父级高度的div数量。当它溢出时，创建一个新列。但我不知道如何使用它。也许使用Flexbox是可能的。我真的很喜欢纯CSS解决方案。很好，谢谢你的链接。但他们似乎也没有办法解决我的问题。