CSS: creating asymmetrical grids with generated content

by gabrieleromanato

HTML

<div id="container">
    <div class="row">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
    <div class="row spaced">
        <div class="box"></div>
    </div>
</div>

CSS

#container {
    width: 100%;
}

div.row {
    height: 8em;
    padding: 0 2%;
}

div.box {
    float: left;
    width: 23%;
    height: 100%;
    margin: 0 0 2% 2%;
    background: silver;
}

div.spaced:before {
    content: ' ';
    display: block;
    width: 46%;
    height: 100%;
    float: left;
    margin-left: 2%;
}

div.spaced:after {
    content: ' ';
    display: block;
    width: 23%;
    height: 100%;
    float: left;
    margin-left: 2%;
}

div.spaced div.box {
    margin-left: 4%;
}