Tetris CSS responsive, dynamic design

Let's say we have some block: ``` <div class="block"></div> ``` There are three sizes of `block`: ``` <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 we have plenty of block in our website and they are totally mixed up: ``` <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 tidy, imagine you playing tetris using this blocks. So two questions: - How to organize block structure using CSS/JS? Any known algorithm/jquery plugin/solution? Where to start? - What to do when visitor will change browser window size? (see the picture) - What about more sizes (for ex. 3x4 etc.)