Fill grid with double height elements - css

Question

I'm working on a dashboard that has a few containers that are either double the height or width of other elements.
It's pretty straight forward doing this with good ol' tables like this: Fiddle
<table cellspacing="4">
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td rowspan="2"></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</table>
However, with list items float:left; it seems rather difficult getting the containers to wrap around each other the way I expect them to.
Should I just use tables as in my example, or is there a clean solution to this, wihtout requiring a bunch of work?
I'm lucky enough only having to support Chrome.

Answer 1

I actually wanted to do this using flexbox, but I'll setlle for a float-based solution for now:
section {
display: block;
width: 128px;
padding: 4px 0 0 4px;
background-color: rgb(191,191,191);
}
div {
float: left;
display: inline-block;
width: 40px;
height: 40px;
margin: 0 2px 2px 0;
background-color: rgb(0,0,0);
vertical-align: top;
}
.x2 {
width: 82px;
}
.y2 {
height: 82px;
}
.right {
float: right;
margin: 0 4px 2px 0;
}
section::after {
content: '';
display: block;
width: 2px;
height: 2px;
clear: both;
}
<section>
<div class="y2"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="y2 right"></div>
<div class="x2"></div>
</section>