Working with Autoprefixer CSS Grid

[davshoward]

Hi,

Is it there a way to combine the replacement of a custom property with autoprefixers CSS grid support?

:root {
    --base-padding: 1.25rem;
}

.class {
    display: grid;
    grid-gap: var(--base-padding);
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
}

Outputs:

:root {
    --base-padding: 1.25rem;
}

.class {
    display: -ms-grid;
    display: grid;
    grid-gap: 1.25rem;
    grid-gap: var(--base-padding);
    -ms-grid-columns: 1fr var(--base-padding) 1fr;
    grid-template-columns: 1fr 1fr;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
}

Is it possible to have the line as: -ms-grid-columns: 1fr 1.25rem 1fr;

Cheers

[aykut-rocks]

we have the same issue, the grid fallback doesn't work properly. i think the problem is the order of the fallbacks. the fallback should always be written after the variable. is it possible to switch the order in the configuration?

output now: grid-gap: 1.25rem; grid-gap: var(--base-padding);

required output: grid-gap: var(--base-padding); grid-gap: 1.25rem;

[JawsomeJason]

No, the fallback should be written before the variable, otherwise, the variable will never be used.

Autoprefixer needs to ignore the lines with var, as they are invalid in IE11.