column layout with gutters

by Patrick Hund

HTML

<h1>The Problem</h1>
<div class="wrapper wrapper-problem">
    <div class="col">singen</div><div class="col">tanzen</div><div class="col">lachen</div><div class="col">wurst</div><div class="col">senf fddfg dfgd dfdfgdgfddfg dfgd dfdfgdgfddfg dfgd dfdfgdgfddfg dfgd dfdfgdg</div><div class="col">ketchup</div><div class="col">wurst</div><div class="col">senf</div><div class="col">ketchup</div><div class="col">foo, foo, foo, foo, foo, foo, FOOOOOO!</div><div class="col">bar</div><div class="col">baz</div>
</div>
<h1>The Solution</h1>
<div class="wrapper wrapper-solution">
    <div class="col">singen</div><div class="col">tanzen</div><div class="col">lachen</div><div class="col">wurst</div><div class="col">senf fddfg dfgd dfdfgdgfddfg dfgd dfdfgdgfddfg dfgd dfdfgdgfddfg dfgd dfdfgdg</div><div class="col">ketchup</div><div class="col">wurst</div><div class="col">senf</div><div class="col">ketchup</div><div class="col">foo, foo, foo, foo, foo, foo, FOOOOOO!</div><div class="col">bar</div><div class="col">baz</div>
</div>

CSS

*, *:before, *:after {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
body {
    padding: 0;
    margin: 0;
}
.wrapper {
    width: 640px;
    border: 5px solid purple;
}
.col {
    padding: 4px;
    width: 33.3333333%;
    margin: 6px 0 6px 0;
    background-color: lime;
}
.col:nth-last-child(-n+3) {
    margin-bottom: 0;
    background-color: hotpink;
}
.col:nth-child(-n+3) {
    margin-top: 0;
    background-color: orange;
}
.wrapper-problem {
    margin-bottom: 240px;
}
.wrapper-problem .col {
    float: left;
}

.wrapper-solution .col {
    display: inline-block;
    vertical-align: top;
}