Pure CSS masonry layout

HTML

<div id="container" class="cols">
    <div class="box one">1</div>
    <div class="box two">2</div>
    <div class="box one">3</div>
    <div class="box three">4</div>
    <div class="box two">5</div>
    <div class="box five">6</div>
    <div class="box one">7</div>
    <div class="box two">8</div>
    <div class="box six">9</div>
    <div class="box three">10</div>
    <div class="box two">11</div>
</div>

CSS

#container {
    width: 100%;
    max-width: 700px;
    margin: 2em auto;
}
.cols {
    column-count: 3;
    column-gap: 3%;
    column-width: 0%;
}
.box {
    margin-bottom: 20px;
}
.box.one {
    height: 200px;
    background-color: #d77575;
}
.box.two {
    height: 300px;
    background-color: #dcbc4c;
}
.box.three {
    background-color: #a3ca3b;
    height: 400px;
}
.box.four {
    background-color: #3daee3;
    height: 500px;
}
.box.five {
    background-color: #bb8ed8;
    height: 600px;
}
.box.six {
    background-color: #baafb1;
    height: 200px;
}