Danske Grid

by Kenneth Luplau-Brøgger

HTML

<div class="row">
    <div class="three columns">
        davs
    </div>
    <div class="three  columns">
        hej
    </div>
    <div class="three columns">
        hej
    </div>
    <div class="three columns">
        hej
    </div>
</div>
<div class="row">
    <div class="six columns">
        davs
    </div>
    <div class="six columns">
        hej
    </div>
</div>
<div class="row push-six">
    <div class="six columns">
        davs
    </div>
</div>
<div class="row">
    <div class="six columns push-six">
        davs
    </div>
</div>

CSS

.row {
    overflow: hidden;
    width: 934px;
    margin: 0 16px
}
.push-three {
    padding-left: 239px;
}
.three.columns{
    width: 217px;
}
.six.columns{
    width: 456px;
}
.nine.columns{
    width: 695px;
}
.columns {
    background: red;
    float: left;
}
.columns + .columns {
    margin-left: 22px;
}
.push-three{
    padding-left: 239px;
}
.push-six {
    padding-left: 478px;
}
.push-nine{
    padding-left: 717px;
}