Question

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

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

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

已在版本11.1 safari中修复

Answer 1

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

通常，包含弹性项目的元素必须在其自身上设置其尺寸。 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>

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

1 个答案:

jsFiddle demo