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?

Beefburger

For me column-fill: auto; was causing this problem. – Barbee

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.

Tapetum

You're more than welcome Nisarg, glad that it worked! – Tapetum

@Beefburger If it works, why don't you accept this answer. Let Patrizio enjoy the bounty points. – Circumcision

Answer 2

According to Can I use...

Firefox versions 55-59 have partial support for this feature:

Partial support refers to not supporting the break-before, break-after, break-inside properties. WebKit- and Blink-based browsers do have equivalent support for the non-standard -webkit-column-break-* properties to accomplish the same result (but only the auto and always values). Firefox does not support break-*.

You'll need to post a code snippet displaying your issue if you require further assistance.

Platas

It's partial support for break-before, break-after, break-inside properties, but not column-count. See: link Thanks for comment! – Beefburger

Answer 3

you need to add -moz-column-gap: 50px for the ul or the main container. It will fix the issue for firefox.

Happening

Answer 4

Faced with issue in Mozilla Firefox v.97.0.1. Changing property to 'balance' worked in my case.

column-fill: balance;

Willed