CODEWITHSUNDEEP
htmlcss
Vlad Ovaho
Vlad Ovaho

Reputation: 96

CSS multiple columns layout: incorrect column splitting

There seems to be a bug in calculation of multi column css property, present in all browsers I have checked in (latest Chrome, IE11 and Firefox). If you have 9 items in your list, and try to split it in 4 columns, the last column is always empty.

Are there any workarounds, something that will split it 3/2/2/2? Thanks 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>

Upvotes: 6

Views: 936

Answers (3)

Abhishek Pandey
Abhishek Pandey

Reputation: 13558

It is working in same way that it supposed to work, there is enough space in 3 columns for 9 items that's why its not going into 4th, reduce height and it will be divide in more columns. or add more li that will go in 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>

Upvotes: 1

Jeff Luyet
Jeff Luyet

Reputation: 502

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

It looks like the column-* has alot of issues with different browsers. In your example if you were to add 1 more li element, then you can see it will fill itself in on the 4th column. My guess is its a divisibility issue.

Upvotes: 1

Federico
Federico

Reputation: 1422

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>

Upvotes: -1

Related Questions