Dynamic Flexible Grid Pattern

Question

I want toolbars to be created against a flexible grid with the following requirements:

• the total width is variable and should always match the screen even when resizing.
• cells can be combined
• all columns must be the same size (e.g. with three columns)
• same with strings
• total height should optionally match screen height
• these meshes are user generated, so they cannot be hardcoded CSS like online generators do.

Here are some photos that I took:

user-defined grid example

same merged cell example

the same example scales

I am looking for a plugin / code for this, since I am pretty sure that this cannot be done in CSS (the grid layout is not implemented in most browsers as far as I know). The closest I got is to create a table, but the cell size has become complete chaos ( why doesn't this table look neat? ).

Answer 1

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

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