Fluid, flexible and scalable tiles to fill entire

Question

I am trying to create fluid and flexible "tiles" for a website, that span across 100% of the viewport of the browser. However, I would like them to scale a bit if needed to eliminate all white space if a the next tile doesn't fit.

A normal div tag with a min-width & min-height of 200px, set to "display: inline-block" gets me most of the way. As I expand the browser window, the boxes will move up to the top line if there is room for another.

My problem is when there isn't room for the next div, there is whitespace on the right. Instead of that, I want each div to 'scale up' to fix the full width of the line.

So if the browser was set to 675px, instead of having 3 divs at 200px, there would be 3 at 225px. But if you then resize the browser to 800px, then there would be 4 divs of 200px.

Sorry if that is hard to understand. Essentially, I am trying to mimic how http://pulse.me displays their articles.

I would like to do this in pure CSS if at all possible, but I suspect for the window resize at least, some javascript will be needed. Any thoughts?

Answer 1

For a pure-CSS approach, you can use media queries combined with percentage widths:

.tile {
    /* 4 tiles per row */
    width: 25%;
}

@media (max-width: 500px) {
    .tile {
        /* 3 tiles per row */
        width: 33.33333333332%
    }
}

@media (max-width: 300px) {
    .tile {
        /* 2 tiles per row */
        width: 50%
    }
}

Here's a fiddle that demonstrates this: http://jsfiddle.net/bDBMP/1/