如何使用CSS创建网格/平铺视图？

例如，我有一个类.article，我想查看这个类作为网格视图。所以我应用了这种风格：

.article{
  width:100px;
  height:100px;
  background:#333;
  float:left;
  margin:5px;
}

那种风​​格会使.article看起来平铺/网格。它的工作精细与固定的高度。但如果我想将高度设置为自动(根据其中的数据自动拉伸)，网格看起来很讨厌。

并且我想使这样的视图：

解决方法

这种类型的布局称为Masonry布局。 Masonry是另一个网格布局，但它将填充由元素的高度差造成的空白。

jQuery Masonry是一个jQuery插件来创建砖石布局。

或者，您可以使用CSS3 columns。但现在基于jQuery的插件是最好的选择，因为有CSS3列的兼容性问题。