如何使用CSS创建网格/平铺视图？ [英] How to Create Grid/Tile View with CSS?

问题描述

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

For example, I have some class .article, and I want to view this class as grid view. So I applied this style:

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

该样式将使.article看起来平铺/网格。它的工作精细与固定的高度。但如果我想将高度设置为自动（根据其中的数据自动拉伸），网格看起来很讨厌。

that style will make the .article look tiled/grid. it's work fine with fixed height. but if i want to set the height to auto (automatically stretch according to the data within it), the grid look nasty.

和我想要这样的视图：

and i want to make the view like this :

推荐答案

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

This type of layout is called Masonry layout. Masonry is another grid layout but it will fill out the whitespace caused by the difference height of elements.

jQuery Masonry is one of jQuery plugin to create masonry layout.

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

Alternatively, you can use CSS3 columns. But for now jQuery based plugin is the best choice since there is compatibility issue with CSS3 column.

这篇关于如何使用CSS创建网格/平铺视图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！