dynamic flexible grid layout

Question

I want dashboards layed out against a flexible grid with the following requirements:

• total width is variable, and must always fit the screen, even at resizes
• cells may be merged
• all columns should have the same size (example, with 3 columns)
• same with rows
• total height should optionnaly fit the screen height
• those grid are user generated, so they can't be CSS hard-coded like the online generators do.

Here's some pictures I've made:

example of user defined grid

same example with merged cells

same example scaled

I'm looking for a plugin/code to achieve that, as I'm almost sure it can't be done in CSS (grid layout is not implemented yet in most browsers, as far as I know). The closest I got was generating a table, but sizing the cells ended up being a complete chaos (why doesn't this table look neat?).

Answer 1

You can get close to that by using a plugin like http://masonry.desandro.com/ or http://www.wookmark.com/jquery-plugin

For the responsive bit, I recommend reading http://osvaldas.info/responsive-jquery-masonry-or-pinterest-style-layout. It talks about the masonry plugin but the concepts can be universally applied.