Column-Count Property is not working on Firefox

Question

I have used the CSS3 multi-column feature, using the column-count property to split into multiple columns.

This is my code:

div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

It's not working on my Firefox version or Firefox developer Edition. The code is working on: Google Chrome, Opera, and Microsoft Edge.

Is this a bug or is there any solution?

Answer 1

I had to work on something similar a few years ago, and for what I remember, the cross-browser support wasn't bullet-proof (especially with older browsers) but this should work fairly well.

https://codepen.io/patriziosotgiu/pen/jGporg?editors=1100

Put the column-break in a container outside of the ul tag. Also, in case you have to work on more complex layouts, a bunch of extra break properties may be helpful (See li).

Tested with latest Firefox, Chrome, Safari on Mac.

Note: Using flexbox would probably give you a better result, and a more up to date solution. It is worth trying it if your project can use flexbox.