Responsive grid

by jmjpro

HTML

<div id="1" class="grid box row1"></div><div id="2" class="grid box row1"></div><div id="3" class="grid box row1"></div><div id="4" class="grid box row1"></div>
<div class="rowbreak"></div>
<div class="inner">
<div id="5" class="grid hor-rect"></div><div id="6" class="grid box"></div>
<div class="rowbreak">
<div id="8" class="grid hor-rect"></div><div id="9" class="grid box"></div>
    </div>    
</div><div id="7" class="grid vert-rect"></div>

<div class="rowbreak"></div>
<div id="10" class="grid box"></div><div id="11" class="grid box"></div><div id="12" class="grid hor-rect"></div>

CSS

.grid {
    background-color: black;
    float: left;
    margin: 10px;
    vertical-align: top;
}

.inner {
    float: left;
}

.rowbreak {
    clear: both;
}

.box {
    width: 200px;
    height: 200px;
}

.hor-rect {
    width: 420px;
    height: 200px;
}

.vert-rect {
    width: 200px;
    height: 420px;
}