cssgridpositioningcss-floattiles

How to Create Grid/Tile View?

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

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.

enter image description here

And I want to make the view like this:

enter image description here

Solution

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

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