Fluid, Flexible And Scalable Tiles To Fill Entire Width Of Viewport

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 elimina

Solution 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/