如何在占用空白空间的CSS中制作网格画廊？

Question

I want to make a kind of grid gallery. I want it to be responsive so i thought to use float with percentage.

Float in css states it'll occupy empty spaces. (I may be wrong, it might applicable for horizontal only not vertical).

I tried with this code:

css

#wrapper {
    width:100%;
}
.blocks{
    width:25%;
    float:left;
    border:2px solid green;
    margin:5px;
}

Html

<div id="wrapper">
    <div class="blocks">
        <img src="http://i.stack.imgur.com/DOPHF.jpg"/>
    </div>
     <div class="blocks">
        <img src="http://i.stack.imgur.com/ppuwO.jpg"/>
    </div>
     <div class="blocks">
        <img src="http://i.stack.imgur.com/t2QF9.jpg"/>
    </div>
    <div class="blocks">
        <img src="http://i.stack.imgur.com/MAVHu.jpg"/>
    </div>
    <div class="blocks">
        <img src="http://i.stack.imgur.com/XpHOP.jpg"/>
    </div>
</div>

JSfiddle

In the Jsfiddle there is a gap between image 1 and image 5.

Why it is happening how to occupy the empty space.

Note: image sizes are changeable so it should dynamically adjust.No need for hardcode.

Any other way to make grid gallery? What is the problem here?

Answer 1

If you want it to work responsively, you'll want

display:inline;

for this, not

float:left;

Although that solution will need some additional work, so I have another suggestion.

I think you might be interested in Twitter Bootstrap since it is oriented around responsive design and has dedicated grid layouts just for things like this.

Answer 2

If you have variable height/width blocks, getting a CSS solution which can accommodate any combination will prove frustratingly elusive. You'll likely be best going down a JS route with something like jQuery Masonry

Alternatively you can always crop/resize the content of your tiles, and use something like this