Vertical wrap instead of horizontal

Question

When the contents of a series of HTML elements with inline display does not fit in a container fixed size, the normal is that the content is broken as text. That is, from left to right. Something like:

div1 div2 div3 div4 div5 (quebra)
div6 div7 div8 div9 div10 (quebra)
div11 div12 div13...

I would like that, instead of flowing from left to right, the elements would flow from top to bottom (like display in block)... But when filling the height of the container, the content suffered a break and a new column was filled right. Something like:

div1      div6      div11
div2      div7      div12
div3      div8      div13
div4      div9      ...
div5      div10
(quebra)  (quebra)

Is it possible to do this only with HTML and CSS? My elements vary dynamically and I wish I could do something that didn’t involve modifying the layout programmatically.

Answer 1

You can use the property column-Count to define the amount of columns of your container, example:

<div class='wrap'>
    <div class='col'>div1</div>
    <div class='col'>div2</div>
    <div class='col'>div3</div>
    <div class='col'>div4</div>
    <div class='col'>div5</div>
...
</div>

CSS

.wrap {
-webkit-column-count: 3;
   -moz-column-count: 3;
        column-count: 3;
 }

Example: Jsfiddle