CODEWITHSUNDEEP
csscolumn-count
Nisarg
Nisarg

Reputation: 1641

Column-Count Property is not working on Firefox

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?

Upvotes: 5

Views: 10350

Answers (4)

Alen Hota
Alen Hota

Reputation: 1

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

column-fill: balance;

Upvotes: 0

user3079223
user3079223

Reputation: 1

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

Upvotes: 0

Patrizio Sotgiu
Patrizio Sotgiu

Reputation: 176

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.

Upvotes: 6

C. Helling
C. Helling

Reputation: 1402

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.

Upvotes: 2

Related Questions