Firefox 中忽略的网格项目的百分比填充/边距

Question

这 codepen 在 Chrome 上创建了一个 100*50 像素的红色单元格网格。这是预期的行为。

#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 完全忽略 padding-bottom: 50%;，我不知道为什么。

我找不到任何解决方法。有人可以帮我吗？

Answer 1

来自规范：

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.

这是完整的部分：

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，另一种 CSS3 技术，具有 .

以下是我如何为嵌套在 flex 容器中的视频实现底部填充技巧（参见最后一个要点）：

Answer 2

我找到了解决办法：我必须使用 'width: 100%' 规则向单元格添加一个包装器，它终于可以在 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>

这可能是一个临时解决方案，由于 CSS 网格是全新的，可能会发生变化。

Firefox 中忽略的网格项目的百分比填充/边距

Percentage padding / margin on grid item ignored in Firefox

css

firefox

css-grid