Column-Count Property is not working on Firefox

css column-count
Nisarg picture Nisarg · Oct 12, 2017 · Viewed 7.9k times · Source

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

Patrizio Sotgiu picture Patrizio Sotgiu · Oct 13, 2017

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.

Related questions

Column-count is not working in Chrome

I have a text splitted in 4 columns and it works perfectly in Safari I don't know why I can see just 2 columns in Google Chrome. Tested with Chrome 55.0.2883.95 (64-bit) Any help would be greatly appreciated.

Read More
Can I order my CSS columns horizontally instead of vertically?

Here is my code: The result is: 1 4 7 10 2 5 8 11 3 6 9 12 What I want is: 1 2 3 4 5 6 7 8 9 10 11 12 Is that possible? How should I make it?

Read More
CSS column-count columns differ in height

I'm trying to create a masonry grid of images The general idea is to use column-count in to achieve this example. I have three columns with a bunch of images, and the CSS and HTML is identical to that in …

Read More