Make the articles list in three columns - html

Question

I wonder if there is the way to create css-rules to display the articles in three columns as shown (http://i.stack.imgur.com/XRSGs.png). Preferred HTML markup is:
<div>1</div>
<div>2</div>
<div>3</div>
...
<div>6</div>
The only condition is to avoid additional manipulations with html-markup during the render - no nested blocks and so on. Any ideas?
Please see the code at JSFiddle: jsfiddle.net/3nv7rkcg

Answer 1

Its very difficult to make from css and it can't be dynamic. So please better to use js http://isotope.metafizzy.co/ .
Now we can make it from css too :)
Here is the code
#import "compass/css3";
*, *:before, *:after {box-sizing: border-box !important;}
article {
-moz-column-width: 13em;
-webkit-column-width: 13em;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
}
section {
display: inline-block;
margin: 0.25rem;
padding: 1rem;
width: 100%;
background: #efefef;
}
p {
margin: 1rem 0;
}
/* styles for background color, etc; not necessary for this thing to work */
body {
padding: 1em;
font-family: "Garamond", serif;
}
h1 {
font-size: 3rem;
font-weight: 800;
}
body {
line-height: 1.25;
}
p {
text-align: left;
}
<article>
<section>
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error aliquid reprehenderit expedita odio beatae est.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis quaerat suscipit ad.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem nihil alias amet dolores fuga totam sequi a cupiditate ipsa voluptas id facilis nobis.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem ut debitis dolorum earum expedita eveniet voluptatem quibusdam facere eos numquam commodi ad iusto laboriosam rerum aliquam.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat architecto quis tenetur fugiat veniam iste molestiae fuga labore!</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit accusamus tempore at porro officia rerum est impedit ea ipsa tenetur. Labore libero hic error sunt laborum expedita.</p>
</section>
<section>
<p>Lorem ipsum dolor sit.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima asperiores eveniet vero velit eligendi aliquid in.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus dolorem maxime minima animi cum.</p>
</section>
</article>