Percentage padding / margin on grid item ignored in Firefox

Question

This codepen creates a grid of red cells 100*50 px on Chrome. This is the expected behavior.

#grid{
  display: grid;
  grid-gap: 8px;
  grid-template-columns: 100px 100px;
}
.cell{
  background-color: red;
  padding-bottom: 50%;
}

<div id="grid">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>

Firefox 52 completely ignores the padding-bottom: 50%; and I don't know why.

I can't find any workaround. Can someone please help me?

Answer 1

From the spec:

6.4. Grid Item Margins and Paddings

Authors should avoid using percentages in paddings or margins on grid items entirely, as they will get different behavior in different browsers.

Here's the full section:

As adjacent grid items are independently contained within the containing block formed by their grid areas, the margins of adjacent grid items do not collapse.

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)

A User Agent must choose one of these two behaviors.

Note: This variance sucks, but it accurately captures the current state of the world (no consensus among implementations, and no consensus within the CSSWG). It is the CSSWG’s intention that browsers will converge on one of the behaviors, at which time the spec will be amended to require that.

Authors should avoid using percentages in paddings or margins on grid items entirely, as they will get different behavior in different browsers.

Auto margins expand to absorb extra space in the corresponding dimension, and can therefore be used for alignment.

Flexbox, another CSS3 technology, has the same problem.

Here's how I implemented the padding-bottom trick for a video nested in a flex container (see last bullet point): https://stackoverflow.com/a/39310591/3597276

Answer 2

I found a solution: I had to add a wrapper to the cell with a 'width: 100%' rule and it finally works on Firefox 52!

#grid{
  display: grid;
  grid-gap: 8px;
  grid-template-columns: 100px 100px;
}
.cell{
  width: 100%;
}
.inner{
  background-color: red;
  padding-bottom: 50%;
}

<div id="grid">
  <div class="cell">
    <div class="inner"></div>
  </div>
  <div class="cell">
    <div class="inner"></div>
  </div>
  <div class="cell">
    <div class="inner"></div>
  </div>
  <div class="cell">
    <div class="inner"></div>
  </div>
</div>

It's probably a temporary solution which is subject to change due to the CSS grid being brand new.