Multi tool use

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.

And I want to make the view like this:

8 Answers
8

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.

column

You can use flexbox.

Place your elements in a multiline column flex container

#flex-container {
display: flex;
flex-flow: column wrap;
}


Reorder the elements, so that the DOM order is respected horizontally instead of vertically. For example, if you want 3 columns,

#flex-container > :nth-child(3n + 1) { order: 1; } /* 1st column */
#flex-container > :nth-child(3n + 2) { order: 2; } /* 2nd column */
#flex-container > :nth-child(3n + 3) { order: 3; } /* 3rd column */


Force a column break before the first item of each column:

#flex-container > :nth-child(-n + 3) {
page-break-before: always; /* CSS 2.1 syntax */
break-before: always; /* New syntax */
}


Sadly, not all browsers support line breaks in flexbox yet. It works on Firefox, though.

#flex-container {
display: flex;
flex-flow: column wrap;
}

#flex-container > :nth-child(3n + 1) { order: 1; } /* 1st column */
#flex-container > :nth-child(3n + 2) { order: 2; } /* 2nd column */
#flex-container > :nth-child(3n + 3) { order: 3; } /* 3rd column */

#flex-container > :nth-child(-n + 3) {
page-break-before: always; /* CSS 2.1 syntax */
break-before: always; /* New syntax */
}

/* The following is optional */
#flex-container > div {
background: #666;
color: #fff;
margin: 3px;
display: flex;
justify-content: center;
align-items: center;
font-size: 36px;
}
#flex-container > :nth-child(1) { height: 100px; }
#flex-container > :nth-child(2) { height: 50px; }
#flex-container > :nth-child(3) { height: 75px; }
#flex-container > :nth-child(4) { height: 50px; }
#flex-container > :nth-child(5) { height: 100px; }
#flex-container > :nth-child(6) { height: 50px; }
#flex-container > :nth-child(7) { height: 100px; }
#flex-container > :nth-child(8) { height: 75px; }
#flex-container > :nth-child(9) { height: 125px; }

<div id="flex-container">
<div>1</div><div>2</div><div>3</div>
<div>4</div><div>5</div><div>6</div>
<div>7</div><div>8</div><div>9</div>
</div>

Now that CSS3 is widely available & compatible through major browsers, Its time for a pure solution equipped with SO's snippet tool:

For creating masonry layout using CSS3 the column-count along with column-gap would suffice. But I've also used media-queries to make it responsive.

column-count

column-gap

media-queries

Before diving into the implementation, please consider that it'd be much safer to add a jQuery Masonry library fallback to make your code compatible for legacy browser, specially IE8- :

<!--[if lte IE 9]>
<script src="/path/to/js/masonry.pkgd.min.js"></script>
<![endif]-->


Here we go:

.masonry-brick {
color: #FFF;
background-color: #FF00D8;
display: inline-block;
padding: 5px;
width: 100%;
margin: 1em 0; /* for separating masonry-bricks vertically*/
}

@media only screen and (min-width: 480px) {
.masonry-container {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}

@media only screen and (min-width: 768px) {
.masonry-container {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
}

@media only screen and (min-width: 960px) {
.masonry-container {
-moz-column-count: 5;
-webkit-column-count: 5;
column-count: 5;
}
}

<div class="masonry-container">
<div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
<div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
<div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 </div>
<div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
<div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
<div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
<div class="masonry-brick">Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 Masonry pure CSS3 </div>
</div>

masonry bricks

The best option to solve that with only css is using css column-count property.

.content-box {
border: 10px solid #000000;
column-count: 3;
}


Check this for more info: https://developer.mozilla.org/en/docs/Web/CSS/column-count

and if you want to go even further than masonry, use isotope http://isotope.metafizzy.co/ it is the advanced version of masonry (developed by the same author) it isn't pure CSS, it uses the help of Javascript but it is very popular, so you will find plenty of docs

if you find it very complicated then there are many premium plugins that based their development on isotope already, for example the Media Boxes http://codecanyon.net/item/media-boxes-responsive-jquery-grid/5683020

You can use display: grid

for example:

This is a grid with 7 columns and your rows has auto size.

.myGrid{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-auto-rows: auto;
grid-gap: 10px;
justify-items: center;
}


For more details acccess the follow link: https://css-tricks.com/snippets/css/complete-guide-grid/

With the CSS Grid Module you can create a pretty similar layout.

CodePen demo

1) Set three fixed-width grid columns

ul {
display: grid;
grid-template-columns: 150px 150px 150px;
...
}


2) Make sure the items with large height span 2 rows

li:nth-child(1),
li:nth-child(3),
li:nth-child(5),
li:nth-child(8),
li:nth-child(9),
li:nth-child(10),
li:nth-child(12)
{
grid-row: span 2;
}


body {
margin: 0;
}
ul {
display: grid;
grid-template-columns: 150px 150px 150px;
grid-gap: 1rem;
justify-content: center;
align-items: center;

/* boring properties: */
list-style: none;
width: 90vw;
height: 85vh;
margin: 4vh auto;
border: 5px solid green;
padding: 1rem;
overflow: auto;
counter-reset: item;
}
li {
position: relative;
}
li:after {
content: counter(item);
counter-increment: item;
position: absolute;
padding: 0.3rem;
background: salmon;
color: white;
left:0;
top:0;
}
img {
outline: 5px solid salmon;
}
li:nth-child(1),
li:nth-child(3),
li:nth-child(5),
li:nth-child(8),
li:nth-child(9),
li:nth-child(10),
li:nth-child(12)
{
grid-row: span 2;
}

<ul>
<li><img src="http://lorempixel.com/150/150/animals" alt="" /></li>
<li><img src="http://lorempixel.com/150/50/animals" alt="" /></li>
<li><img src="http://lorempixel.com/150/140/animals" alt="" /></li>
<li><img src="http://lorempixel.com/150/80/animals" alt="" /></li>
<li><img src="http://lorempixel.com/150/220/animals" alt="" /></li>
<li><img src="http://lorempixel.com/150/120/animals" alt="" /></li>
<li><img src="http://lorempixel.com/150/70/animals" alt="" /></li>
<li><img src="http://lorempixel.com/150/200/animals" alt="" /></li>
<li><img src="http://lorempixel.com/150/230/animals" alt="" /></li>
<li><img src="http://lorempixel.com/150/240/animals" alt="" /></li>
<li><img src="http://lorempixel.com/150/130/animals" alt="" /></li>
<li><img src="http://lorempixel.com/150/160/animals" alt="" /></li>
</ul>

There is one grid-based example.

.grid-layout {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
grid-gap: 10px;
grid-auto-rows: minmax(100px, auto);
grid-auto-flow: dense;
padding: 10px;
}

.grid-layout .item {
padding: 15px;
color: #fff;
background-color: #444;
}

.span-2 {
grid-column-end: span 2;
grid-row-end: span 2;
}

.span-3 {
grid-column-end: span 3;
grid-row-end: span 4;
}

<div class="grid-layout">
<div class="item">content</div>
<div class="item">content</div>
<div class="item span-3">content</div>
<div class="item">content</div>
<div class="item">content</div>
<div class="item span-2">content</div>
<div class="item">content</div>
<div class="item">content</div>
<div class="item span-3">content</div>
<div class="item">content</div>
<div class="item">content</div>
<div class="item span-2">content</div>
<div class="item">content</div>
<div class="item">content</div>
<div class="item">content</div>
<div class="item">content</div>
<div class="item">content</div>
<div class="item">content</div>
<div class="item">content</div>
<div class="item">content</div>
<div class="item">content</div>
<div class="item">content</div>
<div class="item">content</div>
<div class="item">content</div>
<div class="item">content</div>
<div class="item">content</div>
<div class="item">content</div>
<div class="item">content</div>
</div>

based on this code-pen
by Rachel Andrew F.T.W

Thank you for your interest in this question.
Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).


Would you like to answer one of these unanswered questions instead?