html layout: how to float divs vertically - html

Question

How do I get divs to float vertically like in this picture:
Background: I have a grid of checkboxes with content sorted alphabetically and I'd like to have alphabetic order progress vertically (since horizontal order is quite hard to follow). All the divs have same size (width like picture, height = 1 line size).
Update: To clarify: The main intention is to have a table layout with a variable amount of columns based on available screen width and have the cells in column-major order. The actual number of divs is not known in advance.

Answer 1

CSS
.cols {
width:20%;
float:left;
}
.rows {
height:100px;
}
HTML
<div class="cols">
<div class="rows">Div 1</div>
<div class="rows">Div 2</div>
<div class="rows">Div 3</div>
</div>
<div class="cols">
<div class="rows">Div 4</div>
<div class="rows">Div 5</div>
<div class="rows">Div 6</div>
</div>
<div class="cols">
<div class="rows">Div 7</div>
</div>

Answer 2

If you are willing to set a fix height on the table holding the cells you could use flexbox.
Set your holding container to:
display: flex;
flex-direction: column;
flex-wrap: wrap;
And your child elements to:
flex-grow: 20%;
min-width: 200px;
See the pen: http://codepen.io/anon/pen/qIpAl

Answer 3

#KunJ : compatibility of grid layout is very bad... ie10 + only,
http://caniuse.com/css-grid
I think without JS you can't do the tricks, I had the same problem, in order to resolve them, I've load all elements, count them et replace in the good div

Answer 4

Although the following is not a complete solution, maybe others can build on it to achieve the necessary result:
FIDDLE
Markup
Divs wrapped in a container div
CSS
div
{
width: 100px;
height: 50px;
background: orange;
border: 1px solid yellow;
display:block;
}
div:nth-child(4n)
{
display:table-cell;
}
.container
{
display:table;
width: 100%;
}