[css-grid] grid-gap warning needlessly appearing

[Dan503]

I have this grid code:

.grid {
    display: grid;

    /* This is producing a warning in Autoprefixer. */
    /* This code works perfectly in IE though. */
    grid-gap: 30px;
}

@media (min-width: 601px) {
    .grid {
        grid-template:
            "a    b" auto /
             1fr  1fr;
    }
}

@media (max-width: 600px) {
    .grid {
        grid-template:
            "a" auto
            "b" auto /
             1fr;
    }
}

.a { grid-area: a; }

.b { grid-area: b; }

Both the grid template declarations are wrapped in media queries. The grid gap is a default that applies to both.

This code works fine in IE with Autoprefixer so there should not be any warning given.

[easbarba]

https://github.com/postcss/autoprefixer/blob/2471de84d0596778a38c915c2e70c47945aad92c/lib/hacks/grid-template.js#L44

[Dan503]

Recognise that this is just an edge case. I'm not endorsing the removal of the warning all together. Only for this particular scenario.

The warning can be worked around by using one of the template declarations as a default and then overide it with a media query. (It just made my code a bit messier than I would have liked).

[casey6]

FYI it’s possible to have a width of 600.5px where neither media query would apply.

[Dan503]

I've never really had an issue with that.

Browser support for the new style of media queries (the ones with greater and less than symbols) isn't good enough to rely on those yet.

[casey6]

It’s definitely an edge case, but I’ve ran into that bug in the past. Slightly off-topic, but I felt it was worth mentioning because the warning is technically still valid in your example.