How do I arrange div blocks in multiple columns?

The number of blocks is different each time, from 1 to 40. You need to arrange them like this:

1  7
2  8
3  9
4  ...
5
6

The number of columns can be from 1 to 5. The difficulty is that without using scripts, standard html+css to achieve this. The blocks are of different heights, and when the next block does not fit at the bottom (the height of the container is 380px), we start a new column.

In html, I have it all like this:

  <div class="test">                                       
    <a href="" class="c">Первый</a>
    <a href="" class="c">Второй</a>
    <a href="" class="c">Третий</a>
    <a href="" class="c">Четвертый</a>
    <a href="" class="c">Пятый</a>
    <a href="" class="c">Шестой</a>
    <a href="" class="c">Седьмой</a>
    ....
    </div>
Author: MatthewP, 2014-02-18
Source

3 answers

The CSS columns property will help you.

.test {
    -moz-columns: 50px 5;
    -webkit-columns: 50px 5;
    columns: 50px 5;
    height: 200px;
}

Note that this property only appeared in CSS3, so older browsers do not support it.

Http://jsfiddle.net/RM4uL/2/

 2
Author: fori1ton, 2014-02-18 13:38:52

I'm afraid we'll have to crutch here. 

div.wrapper
{
width:200px;
height:100px;
margin-top: 200px;
background-color:yellow;
color: #000;
/* Rotate div */
transform:rotate(-90deg);
-ms-transform:rotate(-90deg); /* IE 9 */
-webkit-transform:rotate(-90deg); /* Safari and Chrome */
}

div.inner
{
float: left;
width:20px;
height:10px;
background-color:blue;
margin-top: 50px;
color: #000;
/* Rotate div */
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-webkit-transform:rotate(90deg); /* Safari and Chrome */
}

<div class="wrapper">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>

Feature: you first expand all the divs backwards, then expand the common block again. Utter perversion. But it should work like you said.

N.B. This will also only work in new browsers.

 2
Author: knes, 2014-02-18 13:57:43

Use display: flex;

Here is the full documentation: http://frontender.info/a-guide-to-flexbox/

.category-list {
  list-style: none;
  height: 100px;
  border: 1px solid red;
  display: flex;
  flex-direction: column; 
  flex-wrap: wrap
}
.category-list li {
  page-break-inside: avoid;
  break-inside: avoid;
}
<ul class="category-list clearfix">
  <li class="category-item">1</li>
  <li class="category-item">2</li>
  <li class="category-item">3</li>
  <li class="category-item">4</li>
  <li class="category-item">5</li>
  <li class="category-item">6</li>
  <li class="category-item">7</li>
  <li class="category-item">8</li>
  <li class="category-item">9</li>
  <li class="category-item">10</li>
  <li class="category-item">11</li>
  <li class="category-item">12</li>
</ul>
 1
Author: Vadizar, 2017-01-30 20:59:59