How can I force an odd column-count when I have an even number of columns?

Question

I've got a columns class that sets the number of CSS columns to three. This looks like the following:

.columns {
  column-count:3;
  -moz-column-count:3;
  -webkit-column-count:3;
}

<ul class="columns">
  <li>Apples</li>
  <li>Grapes</li>
  <li>Pears</li>
  <li>Bananas</li>
</ul>

I'd like this to be displayed in the following format:

Apples Grapes Pears Bananas

This can be seen on this fiddle: http://jsfiddle.net/fM8ce/1/

If I remove bananas then all three columns are used as expected and is outputted in the following way:

Apples Grapes Pears

This can be seen in this fiddle: http://jsfiddle.net/fM8ce/

How can I get four items to be distributed as expected, across three columns rather than 2?

This is not how the columns feature works. It's meant for automatically breaking long texts into multiple columns. As seen here: http://jsfiddle.net/N9Ych/ — Maximilian Riegler, Jul 29 '14 at 10:46
That also breaks if the text can be spread across four cells: http://jsfiddle.net/N9Ych/1/ — Arthur, Jul 29 '14 at 10:56
Your example just provides to less text for your browser width. Make your window smaller in width and watch it break into the 3rd column. — Maximilian Riegler, Jul 29 '14 at 11:01
I agree that css 3 columns magic is for breaking content, not lists; but in this case it looks more like a bug than like a feature. If it works with 4 columns in other way than with 3 columns it is better to avoid it and use other list positioning tricks, like http://stackoverflow.com/questions/3197110/how-to-produce-a-3-column-list. It is all basic CSS margins, heights et cetera. — d.sergeiev, Jul 29 '14 at 11:03

Danield · Answer 1 · 2014-07-29T11:00:04.720

I don't think this is possible using css columns.

It looks like you should simply use display:inline-block or float:left so achieve your layout - like this:

<ul class="columns">
    <li>Apples</li>
    <li>Grapes</li>
    <li>Pears</li>
    <li>Bananas</li>
</ul>

CSS

.columns {
    width: 100%;
}
li {
    width: 33%;
    display:inline-block;
}

The reason why I don't think you really want to use css columns is because you yourself write that you want to achieve:

Apples Grapes Pears Bananas

whereas even if it were possible with css columns - the final result would be:

Apples Pears Bannanas Grapes

because css columns works down the columns first.