Grid layout with an other row

Responsive grid, layout of squares 2x2 + 3x3 + 1x3 elements.

by web tiki

HTML

<div id="big_wrap">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div id="small_wrap">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div id="right_col">
    <div></div>
    <div></div>
    <div></div>
</div>

CSS

body{
    width:120%;
}
div {
    float:left;
}
div > div{
    background:#2C3E50;
}
#big_wrap,#small_wrap{
    width:43%;
}
#right_col{
    width:14%;
}
#big_wrap > div{
    width:48%;
    padding-bottom:48%;
    margin:1%;
}
#small_wrap > div{
    width: 31%;
    padding-bottom : 31.3%;
    margin:1%;
}
#right_col > div{
    width:95%;
    margin:2.5% 5% 5% 0;
    padding-bottom:95.1%;
}