Fluid grid with automatically adjusting number of columns

Question

I'm wondering whether the following is possible with CSS:

• grid of DIVs, in any number of columns, let's say N (which could be anywhere from 5 to 20, or more)
• grid should be fluid, that is every DIV contracts and expands as the browser width changes, so that the DIVs take 100% of the browser width
• under certain browser width, grid switches to a N-1 column layout, that is, loses one column, and DIVs again expand to fit the browser width
• process should repeat until the layout becomes single column based, again with the DIVs width being fluid

I't kind of a hard to put to words, but it should behave similarly to images in this page, but it should go all the way down to one column, and not jump from three to six column layout instantly.

I know I could do it with Javascript, and as it's done in the above link, with @media queries (with a lot of manual fiddling with column widths), but I'm wondering is there a way to do this only in CSS, and let the browser do the work for me?

Thanks.

Answer 1

Have you considered using Twitter Bootstrap Grid system? Or at least reviewing and adopting a similar system? http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem with their 'responsive' grid css (or whatever they call it).

Here is an example of the grid system in action. http://jsfiddle.net/rlemon/yS78x/1/

It utilizes media queries, like you mention above... but it is already kinda done for you and IMO is one of the easier grid system to adopt.