VulCode
Blog

Autoprefixer: grid gaps set with grid-row-gap and grid-column-gap survive inheritance

A rule that inherits grid-template-areas copied the gap only from grid-gap. A gap set with grid-row-gap and grid-column-gap was lost from the -ms-grid prefixes.

DualFroz - VulCode CEODualFroz - VulCode CEO1 min read
Autoprefixer: grid gaps set with grid-row-gap and grid-column-gap survive inheritance - DualFroz - VulCode CEO
Title in the repository
Inherit grid gap set with the row-gap and column-gap longhands
Merged
15 Sep 2026
Written up here
6 Oct 2026

The note was written 21 days after the change was merged.

Autoprefixer
Technologies:JavaScriptCSSPostCSS

What was broken

Autoprefixer can turn grid-template-areas into the older -ms-grid-columns and -ms-grid-rows syntax. When one rule inherits the grid areas of another, for example .card.modifier from .card, the gap between columns has to be copied from the parent rule, otherwise the computed columns do not add up.

The code looked for that gap only in the grid-gap shorthand. If the container set its gaps separately, with grid-row-gap and grid-column-gap, the inheriting rule got -ms-grid-columns: (1fr)[2] instead of 1fr 50px 1fr, a grid without its gap.

What we changed

getGridGap already recognised both forms through a regular expression; the inheritance path just did not use it. The expression moved into a shared constant and both paths now apply the same rule:

javascript
const GAP_PROPS = /^(grid-)?((row|column)-)?gap$/

// find gap values, set either by the shorthand or by the longhands
r.walkDecls(GAP_PROPS, d => (gridGap = getGridGap(d)))

How we tested it

The grid-gap.css test cases gained a pair of rules, .longhand-gap and .longhand-gap.modifier, with gaps set through the longhand properties. The expected output is -ms-grid-columns: 1fr 50px 1fr and -ms-grid-rows: 100px 40px 100px in both rules. In the pull request we noted that this bug may be behind issues #1243 and #1181, but we could not confirm which syntax was used there.

The result

The change was merged on 15 September 2026. It is one of two changes we have had merged into Autoprefixer, next to a fix for source map sources of grid prefixes.

A PostCSS plugin that adds browser prefixes to CSS based on Can I Use data.

Language
JavaScript
GitHub stars
22,209
Our merged changes to Autoprefixer: 3
The project's page in Contributions

The same case before and after the change

On the example of the note: what came out before the fix and what comes out now.

The rule from the grid-gap.css test cases
.longhand-gap.modifier

It inherits grid-template-areas from .longhand-gap, which sets its gaps separately, with grid-row-gap and grid-column-gap.

Before the change
-ms-grid-columns: (1fr)[2]

A grid without its gap: inheritance looked for it only in the grid-gap shorthand.

After the change
-ms-grid-columns: 1fr 50px 1fr
-ms-grid-rows: 100px 40px 100px

Both rules keep the gap, because inheritance uses the same expression as getGridGap.

What it taught us

Shorthand and longhand CSS properties must produce the same result after processing. A tool that rewrites CSS must keep the source map right too.

The values come from the bug description and the expected test output in pull request #1557.

Questions about change #1557

Where the change is, how we tested it and who merged it.

Was this post helpful?