Image Tiling with pure CSS

Question

I am trying to tile images in a grid-like system where there is no spacing between any of them. Is it possible to do without javascript if you can't control the order of the images in the DOM?

You obviously can't just float the containers because there will be gaps if your images are not all the same size.

http://jsfiddle.net/bzCNb/3/

.wrapper
{
    width:400px;
}

/* One grid unit */
.box1
{
    float:left;
    overflow:hidden;
    height:100px;
    width:100px;
}

/* 2x bigger than a box1, takes up 4 grid units */
.box4
{
    float:left;
    overflow:hidden;
    height:200px;
    width:200px;
}

The first three rows behave properly because of the order of the elements in the DOM.

I'm guessing its not possible without javascript. Hopefully I am wrong. =)

Answer 1

You could use column-count CSS3 property to make a grid and have the images fit in like in the following tutorial. http://css-tricks.com/seamless-responsive-photo-grid/