CSS显示类似Windows 8应用程序网格的html内容

Question

我喜欢Windows应用程序的网格外观，并试图用标准的web技术(IE10和up、FF、Chrome、Safari)重新创建它。Windows应用程序中的网格垂直滚动，内容被拆分为必须自上而下读取的列。

到目前为止，我有一个垂直滚动固定高度的div：

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

这很好，但是子元素扭曲有一个问题。他们通常是排在一起的。但是，如果达到元素的高度，我需要它们换到下一列。下面是一个小提琴例子和我想要存档的图像：

​

如何使子元素像Windows 8应用程序网格一样用CSS包装？

Answer 1

找到了一个解决方案:如果达到元素的高度，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;

Answer 2

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