Irregular child width error with CSS grid layout in Firefox

Question

I'm trying to build equal columns for my cards, but my solution is not working in Firefox while it does in Chrome.

My code:

.grid {
    display: grid;
    width: 1170px;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 15px;
    @include breakpoint(xs) {
        grid-template-columns: repeat(3, 1fr);
    }
    @include breakpoint(sm) {
        grid-template-columns: repeat(4, 1fr);
    }
    @include breakpoint(lg) {
        grid-template-columns: repeat(5, 1fr);
    }
}

.card {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

Chrome result (good):

Firefox result (bad):

maybe it's this: https://stackoverflow.com/q/43311943/3597276 (but can't know for sure because there isn't enough code in the question to reproduce the problem) — Michael Benjamin, Aug 27 '18 at 22:11
It's not working. I tried with percentatges and it works, but I would prefer to work with fractions instead of percentatges. — Nau Parejaa Escamilla, Aug 30 '18 at 12:50

score 2 · Accepted Answer · answered Aug 31 '18 at 06:37

2

have you tried the following CSS?

.card {
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    min-width: 0;
}

Your code seems to work for me. Maybe it's a html-element inside your card that's different?

Could you make a pen with the full code (HTML & CSS) so we would be able to help better?

Could you try prefixing your entire css?

answered Aug 31 '18 at 06:37

Vanch

296
1
13

1

I finally found the problem, a js generated html-element inside my grid. – Nau Parejaa Escamilla Aug 31 '18 at 07:35
Great to hear! Please upvote if I was any help at all. :) – Vanch Aug 31 '18 at 07:51

Irregular child width error with CSS grid layout in Firefox

1 Answers1