1560838 - grid-gap applies if display is not grid

Status: RESOLVED INVALID

(Core :: Layout: Grid, defect)

Description

[Johannes]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:67.0) Gecko/20100101 Firefox/67.0

Steps to reproduce:

grid-gap applies even if display is not grid. Example: https://codepen.io/anon/pen/xodMVd

For context:
<div class="parent">
<div class="grid">
<div class="child">Foo</div>
<div class="child">Foo</div>
</div>
</div>

.grid {
display: grid;
grid-gap: 100px;
}

.parent .grid {
display: flex;
}

Actual results:

child elements have gap between them

Expected results:

No gap.

Comment 1

[Hani Yacoub, Desktop QA]

Reproducible on Firefox Nightly 69.0a1, Firefox 68.0b13 and on Firefox 67.0.4 on Windows 10 x 64, Mac OS X 10.14 and on Ubuntu 18.04 x64.

Comment 2

[Emilio Cobos Álvarez [:emilio]]

grid-gap is just a legacy alias of gap, and gap works on Flexbox as well (bug 1398483).

It is a Chrome bug that this doesn't work there: https://bugs.chromium.org/p/chromium/issues/detail?id=762679