CSS multiple columns layout: incorrect column splitting

Question

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>

The column number exactly is 4 but minimum item per column is 3 items so if you add one more li, it will show in the last column — Jared Chu
– Jared Chu, Commented Nov 11, 2016 at 9:57
9 % 4 != 0. Basically, why should that work? What did you expect to happen? — user5306470
– user5306470, Commented Nov 11, 2016 at 9:59
its not about calculation its about the column height when one column have 3 items others also create space for an other — code.rider
– code.rider, Commented Nov 11, 2016 at 10:00
yes, this problem is not about the ul height even set its height may effect to the number of column, but it's not solve the real problem — Jared Chu
– Jared Chu, Commented Nov 11, 2016 at 10:05

Jeff Luyet · Accepted Answer · 2016-11-11 09:57:38Z

1

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.

answered Nov 11, 2016 at 9:57

Jeff Luyet

5124 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Abhishek Pandey · Accepted Answer · 2016-11-11 10:15:22Z

1

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>

edited Nov 11, 2016 at 10:15

answered Nov 11, 2016 at 10:02

Abhishek Pandey

13.6k8 gold badges41 silver badges72 bronze badges

5 Comments

Vlad Ovaho Over a year ago

The problem is that i need a dynamic height, for example if more elements will be added down the line.

Abhishek Pandey Over a year ago

Then there shouldn't be any problem. Column will work fine.

Abhishek Pandey Over a year ago

@downvoter! Please explain your downvote, so I can improve answer.

Vlad Ovaho Over a year ago

if i will set the height to a fixed number, and add more list items afterwards, they will overflow the ul and will not be visible

Abhishek Pandey Over a year ago

Use auto fill for columns, that will be filled according to element height.

Federico · Accepted Answer · 2016-11-11 09:54:56Z

-1

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>

answered Nov 11, 2016 at 9:54

Federico

1,4222 gold badges20 silver badges41 bronze badges

1 Comment

user2866893 Over a year ago

You cannot put a div between ul and li elements, that is invalid html.

Collectives™ on Stack Overflow

CSS multiple columns layout: incorrect column splitting

3 Answers 3

Comments

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related