3 column tiles

only css

by John Doe

HTML

<div id="container" class="cols">
    <div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam laborum quo at veritatis, tempore omnis. Sapiente excepturi voluptatibus in quos, velit, distinctio necessitatibus maxime veritatis asperiores possimus fuga, quae sint.</div>
    <div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus est harum, provident, ipsam eum nesciunt veritatis voluptatibus exercitationem, hic tempora expedita, iste debitis ad dolor nam explicabo dignissimos cum error.</div>
    <div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto assumenda deleniti nam ad cumque fuga porro cum aspernatur, autem animi, corporis, sed velit sit iste nihil adipisci temporibus eos eaque?</div>
    <div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde nostrum ab rerum, odit error doloribus omnis quia quod expedita illum numquam harum sunt cum voluptatum ipsam accusamus cupiditate sapiente amet.</div>
    <div class="box"></div>
    <div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias atque necessitatibus libero dolore non laudantium nam, iusto aliquid! Tenetur quisquam, nihil laudantium hic temporibus perferendis quis voluptatem saepe consequuntur ducimus.</div>
    <div class="box"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, cum alias eveniet soluta quod, doloribus saepe explicabo, beatae quos dolorem magnam qui. Saepe dolorem tenetur explicabo perferendis natus optio eligendi.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem sapiente porro et harum quam voluptatibus laboriosam. Quaerat adipisci voluptatem commodi suscipit deleniti molestias, architecto sint, repellendus neque exercitationem ipsa ipsam.</div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box">1 2 3 4 5 5 67 7 totam error aspernatur iste veniam nostrum, fugiat voluptatibus commodi saepe...

CSS

#container {
    width: 100%;
    max-width: 700px;
    margin: 2em auto;
}
.cols {
    -moz-column-count:3;
    -moz-column-gap: 3%;
    -moz-column-width: 30%;
    -webkit-column-count:3;
    -webkit-column-gap: 3%;
    -webkit-column-width: 30%;
    column-count: 3;
    column-gap: 3%;
    column-width: 30%;
    page-break-inside: avoid;           /* Theoretically FF 20+ */
    break-inside: avoid-column;         /* IE 11 */
}
.box {
    margin-bottom: 20px;
    min-height:100px;
    background:#BFBFBF;
}