If we imagine having a block like this:
<div class="block"></div>
There are different sizes of the block:
<div class="block b1x1"></div>
<div class="block b2x1"></div>
<div class="block b1x2"></div>
For instance, b1x1 has dimensions width:50px;height:50px;, and b2x1 has dimensions width:100px;height:50px;
Now let's say our website has many blocks that are all 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
The goal is to keep them organized, as if playing tetris with these blocks.
This raises two questions:
- How can we structure the blocks using CSS/JS? Are there any established algorithms/jquery plugins/solutions available? Where should we begin?
- What should be done when the visitor adjusts the browser window size? (see the picture)
- What if there are more sizes available (e.g. 3x4)?