Tetris CSS Responsive, Dynamic Design

Question

Let's say we have a block:

<div class="block"></div> 

There are three block sizes:

 <div class="block b1x1"></div> <div class="block b2x1"></div> <div class="block b1x2"></div> 

for example b1x1 is width:50px;height:50px; , b2x1 is width:100px;height:50px;

Now let's say that we have a lot of blocks on our site, and they are completely confused:

 <div class="block b1x1"></div> <div class="block b2x1"></div> <div class="block b2x1"></div> <div class="block b1x1"></div> <div class="block b1x1"></div> <div class="block b2x1"></div> <div class="block b1x2"></div> <div class="block b2x1"></div> .. etc 

But we want to keep them in order, imagine that you play Tetris using these blocks.

So, two questions:

• How to organize block structure using CSS / JS? Any known algorithm / jquery plugin / solution? Where to begin?
• What to do when the visitor resizes the browser window? (see picture).
• How about a larger size (e.g. 3x4, etc.).

Answer 1

How about jQuery Masonry ? It does what you would like using jQuery.

Answer 2

Try the jquery: masonry , do whatever you want http://masonry.desandro.com/