Can anyone help me with a CSS solution to make boxes with different heights stack underneath each other neatly, similar to Tetris?
Here's my code:
CSS
#page .equipeBox{
float:left;
width:280px;
padding:10px;
margin:10px;
background:#fff;
}
HTML
<div id="page">
<div style="font-size:40px">****</div>
<hr />
<div>
<div class="equipeBox">Box 1<br>(Content)</div>
<div class="equipeBox">Box 2<br>(Content)</div>
<div class="equipeBox">Box 3<br>(Content)</div>
<div class="equipeBox">Box 4<br>(Content)</div>
<div class="clear"></div>
</div>
</div>
I want the "Box 4" to go under Box 1 and fill the remaining space, and for any additional boxes to follow this pattern. Any CSS solutions to achieve this dynamically?
EDIT
I have many more boxes, not just 4 or 5, so I need a CSS solution that can handle them all and stack them neatly.
EDIT 2 I'm now trying Masonry.js to address the excessive space between the stacked boxes. How can I reduce the space between them like on the Masonry website?
I'm using this function
$('#equipe').masonry({
itemSelector: '.equipeBox'
});