There are a couple option here, it all depends on the order you want the blocks to be in and the space between the elements.
You can see all the techniques in action in the script below.
In short. CSS might not be enough here.
First lets look at all the CSS-techniques that might be helpful here.
- Display: inline-block;
- Display: table;
- Floats
- columns
- flexbox
display: inline-block lets you control the vertical-alignment.
And you the order is left to right.
But the space is not used properly.
display: table behaves about the same as inline-block; (Depends on the settings) But it wont help here much.
floats: uses the space better.
But it behaves kinda strange. (Try to switch the elements in the DOM here.)
colums: Uses the space very well.
But the order is based on columns, and not the text-direction.
And you might run in couple of webkit specific bugs here.
flexbox: Can do very much for you.
Controlling the order here is tricky. Since the wrap is based on columns.
Otherwise it would behave similar to inline-block;
JS too the rescue.
I hate to admit it but javascript might be the right choice here.
There is something called isotope or masonry that you could use.
This way the order is based on text-direction and the space is used properly.
...
There are other CSS Techniques you could use and maybe get a better result.
But those have limited browser support by now:
$(function(){
$('.masonry').masonry({
// options
itemSelector : '.masonry article'});
});
hr {
clear: left;
}
article {
width: 32%;
margin-top: 15px;
color: #fff;
font-size: 20px;
}
.inline-block article {
display: inline-block;
vertical-align: top;
}
.float article {
float: left;
width: 32%;
margin-left: 3px;
}
.columns {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 0;
-moz-column-gap: 0;
column-gap: 0;
}
.columns article{
width: 100%;
}
.flexbox {
display: flex;
flex-direction: column;
flex-wrap: wrap;
max-height: 500px;
}
.flexbox article {
margin-left: 3px;
}
.masonry article {
margin-left: 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://desandro.github.io/masonry/jquery.masonry.min.js"></script>
Inline-block:
<div class="inline-block">
<article style="height:300px;background:red">1</article>
<article style="height:100px; background:blue">2</article>
<article style="height:200px;background:green">3</article>
<article style="height:100px;background:orange">4</article>
<article style="height:200px;background:purple">5</article>
<article style="height:200px;background:black">6</article>
</div>
<hr />
Floats:
<div class="float">
<article style="height:300px;background:red">1</article>
<article style="height:100px; background:blue">2</article>
<article style="height:200px;background:green">3</article>
<article style="height:100px;background:orange">4</article>
<article style="height:200px;background:purple">5</article>
<article style="height:200px;background:black">6</article>
</div>
<hr />
Columns:
<div class="columns">
<article style="height:300px;background:red">1</article>
<article style="height:100px; background:blue">2</article>
<article style="height:200px;background:green">3</article>
<article style="height:100px;background:orange">4</article>
<article style="height:200px;background:purple">5</article>
<article style="height:200px;background:black">6</article>
</div>
<hr />
Flexbox:
<div class="flexbox">
<article style="height:300px;background:red">1</article>
<article style="height:100px; background:blue">2</article>
<article style="height:200px;background:green">3</article>
<article style="height:100px;background:orange">4</article>
<article style="height:200px;background:purple">5</article>
<article style="height:200px;background:black">6</article>
</div>
<hr />
Masonry (JS):
<div class="masonry">
<article style="height:300px;background:red">1</article>
<article style="height:100px; background:blue">2</article>
<article style="height:200px;background:green">3</article>
<article style="height:100px;background:orange">4</article>
<article style="height:200px;background:purple">5</article>
<article style="height:200px;background:black">6</article>
</div>
