Interop issue with percentage margins/paddings on grid items

[mrego]

This is a well known interop issue that happens in both Flexbox and Grid.
Firefox resolves the percentage margins/padidngs on items against their respective dimension (so different from what happens in regular blocks where they are always resolved against width).
However, Chromium follows the same than blocks.
See Chromium bug #229568.

The spec allows both behaviors: https://drafts.csswg.org/css-grid/#item-margins

Percentage margins and paddings on grid items can be resolved against either:

• their own axis (left/right percentages resolve against width, top/bottom resolve against height), or,
• the inline axis (left/right/top/bottom percentages all resolve against width)
  And has a note to avoid use percentage margins/paddings for grid items.

Simple example to reproduce the issue: https://codepen.io/mrego/pen/EvyMNz
In Firefox the top and bottom margins are 10px, while the left and right are 20px.
In Chromium all of them are 20px.

BTW, there are use counters in Chromium to detect the usage of percentage margins/paddings in flex items:

• https://www.chromestatus.com/metrics/feature/timeline/popularity/955
• https://www.chromestatus.com/metrics/feature/timeline/popularity/956

[rachelandrew]

On the listing now as #13

Looks like Edge is agreeing with Firefox.

[mikkorantalainen]

The spec currently says

Percentage margins and paddings on grid items, like those on block boxes, are resolved against the inline size of their containing block, e.g. left/right/top/bottom percentages all resolve against their containing block’s width in horizontal writing modes.

So the expected behavior is now clearly defined.