Pseudo-Masonry

Using CSS columns. Content does however fill in left-to-right instead of

HTML

<h1>Pseudo-Masonry</h1>
<section class="masonry">
    <article>
        <img src="//placekitten.com/400/700?image=1"/>
    </article>
    <article>
        <img src="//placekitten.com/300/450?image=2"/>
    </article>
    <article>
        <img src="//placekitten.com/500/700?image=3"/>
    </article>
    <article>
        <img src="//placekitten.com/400/400?image=4"/>
    </article>
    <article>
        <img src="//placekitten.com/300/800?image=5"/>
    </article>
    <article>
        <img src="//placekitten.com/340/200?image=6"/>
    </article>
<!--
    <img src="//placekitten.com/500/420?image=11"/>
    <img src="//placekitten.com/400/720?image=8"/>
    <img src="//placekitten.com/400/700?image=10"/>
 -->
</section>

CSS

body{
    margin:10px;
}

.masonry{
    -moz-column-width:10em;
    -webkit-column-width:10em;
    column-width:10em;
    -moz-column-gap:0;
    -webkit-column-gap:0;
    column-gap:0;
}

.masonry > *{
     -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    page-break-inside: avoid;
    padding:10px;
}

img{
    width:100%;
    display:block;
}