CSS: Set divs horizontally in 2 rows

Question

Lets say I have

<div class="cont">
    <div class="single">1</div>
    <div class="single">2</div>
    <div class="single">3</div>
    <div class="single">4</div>
    <div class="single">5</div>
    <div class="single">6</div>
    <div class="single">7</div>   
</div>

What I want to have is to plase the .single divs in 2 rows like bricks horizontaly from left to right this simple way: 1st div will be in left top corner, 2nd will be placed below 1st, 3rd will be placed next to 1st, 4th will be placed below 3rd and so on like:

1 3 5 7 9
2 4 6 8

All the divs has the same size.

I've tried with masonry.js and its working like a charm, but its way to complex solution for so simple task (simply solution is important).

fiddle playground

Answer 1

There is a CSS property that does exactly that

http://tinker.io/8ff59

.cont {
    -webkit-columns: 5em;
    -moz-columns: 5em;
    columns: 5em; /* desired width of column */
}

http://caniuse.com/#feat=multicolumn