ler ler - 1 month ago 6
CSS Question

CSS display inline block: delete the blank space

I have a container with lot of div displayed inline block. But when one of these divs is taller than the others, all the divs in the same line has some blank space on the top.

.all {
text-align: center;
}
.a {
width: 200px;
height: 200px;
background: red;
margin: 20px;
display: inline-block;
}
.b {
height: 100px;
}


The problem.

This is what I'm trying to achieve.

I dont know how to do that.

Answer

It's not possible to do exactly what you pictured in HTML/CSS alone while providing any sort of flexibility or ease of reproduction, although there is a neat Javascript library called Packery that does exactly what you want.

http://packery.metafizzy.co/

EDIT:

Here's a working example of what you're after using Packery, with the newer versions you don't actually need to write any Javascript which makes the bar for entry much lower.

http://jsfiddle.net/s9crmo9d/8/

<div id="container" class="js-packery"
  data-packery-options='{ "itemSelector": ".item", "gutter": 10 }'>

    <div class="item red small"></div>
    <div class="item green large"></div>
    <div class="item orange small"></div>
    <div class="item red large"></div>
    <div class="item green large"></div>
    <div class="item orange large"></div>
    <div class="item red large"></div>
    <div class="item green large"></div>
    <div class="item orange small"></div>

</div>

This could be considered a duplicate as well although he wasn't specifically asking for a CSS based masonry layout.

Is it possible to use flexbox/CSS to create a masonry layout?