Webkit / Chrome错误与网格容器中的填充

Question

当我使用项目的百分比时，网格容器的高度错误。

例如，在源代码或变体 2 中简单用于实际任务。

问题是webkit，Firefox没有遇到这个问题。

.grid {
  display: grid;
  /* grid-template-columns: repeat(auto-fill, minmax(200px, auto));  Variant 2 */
  background: black;
}
.grid__item {
  width: 10%;  /* Remove for Variant 2 */
}
.grid__item-inner {
  padding-top: 50%;
  background: red;
}

<div class="grid">
  <div class="grid__item">
    <div class="grid__item-inner">Item</div>
  </div>
</div>

在版本 11.1 Safari 中修复

Answer 1

CSS Grid 的一大优点是您可以在容器级别设置网格项的宽度和高度。

通常，元素（包括弹性项）必须设置其尺寸。网格不是这样。容器可以管理网格项的所有维度（使用 grid-template-columns 和 grid-template-rows ），而无需触摸项。

在这种特殊情况下，如果您删除了网格项（width: 10%）上的特定大小并将其设置在容器上，则布局在Chrome和Firefox上都有效。

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 10%);
  background: black;
}
.grid__item { }
.grid__item-inner {
  padding-top: 50%;
  background: red;
}

<div class="grid">
  <div class="grid__item">
    <div class="grid__item-inner">Item</div>
  </div>
</div>

js小提琴演示