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?

For me `column-fill: auto;` was causing this problem. – Rehmat Aug 13 '21 at 02:50 — Rehmat, Aug 13 '21 at 02:50

Patrizio Sotgiu · Accepted Answer · 2017-10-13T03:15:35.113

6

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.

edited Oct 13 '17 at 03:15

answered Oct 13 '17 at 00:12

Patrizio Sotgiu

176
5

You're more than welcome Nisarg, glad that it worked! – Patrizio Sotgiu Oct 13 '17 at 15:48
1

@Nisarg If it works, why don't you accept this answer. Let Patrizio enjoy the bounty points. – Jacob Nelson May 31 '18 at 08:24

score 2 · Answer 2 · answered Oct 12 '17 at 20:23

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.

It's partial support for break-before, break-after, break-inside properties, but not column-count. See: [link](https://caniuse.com/#search=column-count) Thanks for comment! — Nisarg, Oct 13 '17 at 20:16

score 0 · Answer 3 · answered Apr 08 '20 at 19:38

0

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

answered Apr 08 '20 at 19:38

user3079223

1

score 0 · Answer 4 · answered Mar 02 '22 at 15:47

0

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

column-fill: balance;

answered Mar 02 '22 at 15:47

Alen Hota

1
1

Column-Count Property is not working on Firefox

4 Answers4