CSS Multiple Column Layout: Incorrect Column Breaks

Question

There seems to be an error in calculating the multi column css property present in all browsers I checked (recent Chrome, IE11 and Firefox). If you have 9 items in your list and try to split it into 4 columns, the last column is always empty.

Are there any workarounds, something that divides it into 3/2/2/2? Thank you in advance.

ul { -moz-column-count: 4; -webkit-column-count: 4; column-count: 4; background-color: gray; } li { background-color: tomato; } 

 <ul> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> </ul> 

Answer 1

http://caniuse.com/#feat=multicolumn

It appears that the * column has a lot of problems with different browsers. In your example, if you need to add 1 more li element, you can see that it will fill in the fourth column. I assume this is a matter of divisibility.

Answer 2

It works the same way it should work, in 3 columns there is enough space for 9 elements, so it does not go to the fourth, reduces the height and will be divided into more columns. or add another li , which will be displayed in the 4th column

 ul { -moz-column-count: 4; -webkit-column-count: 4; column-count: 4; background-color: gray; height:50px; } li { background-color: tomato; } 

 <ul> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> </ul> 

Answer 3

Use this:

 .keeptogether{ display:inline-block; width:100% } 

 ul { -moz-column-count: 4; -webkit-column-count: 4; column-count: 4; background-color: gray; } li { background-color: tomato; } .keeptogether { display: inline-block; width: 100% } 

 <ul> <div class="keeptogether"> <li>item</li> <li>item</li> <li>item</li> </div> <div class="keeptogether"> <li>item</li> <li>item</li> </div> <div class="keeptogether"> <li>item</li> <li>item</li> </div> <div class="keeptogether"> <li>item</li> <li>item</li> </div> </ul>