Chrome浏览器中CSS网格的怪异行为？

Question

我在Chrome和Firefox中观察到此代码的不同行为： HTML：

.container{
    display: grid;
    grid-template-columns: 40px 50px 500px 50px 40px;
    grid-template-rows: 25% 100px auto;
    background-color: violet;
}

<div class="container">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
  <div class="item item-5">5</div>
  <div class="item item-6">6</div>
  <div class="item item-7">7</div>
  <div class="item item-8">8</div>
  <div class="item item-9">9</div>
  <div class="item item-10">10</div>
  <div class="item item-11">11</div>
  <div class="item item-12">12</div>
</div>

因此，在Chrome中：

• 项目11和12 没有紫罗兰色背景（为什么？）
• 第一行的高度为34.2像素（为什么？）

在Firefox中：

• 第11项和第12项确实有背景为紫罗兰色（因为它应该在我的 意见）
• 第一行的高度为18.4px，即div中项目的高度，并且 我认为这是正确的行为

有任何想法为什么会这样吗？

Answer 1

如果未为“ .container”网格指定高度，则百分比将被视为自动。我认为这就是这种行为的原因。

.container{
    display: grid;
    grid-template-columns: 40px 50px 500px 50px 40px;
    grid-template-rows: auto 100px auto;
    background-color: violet;
}

<div class="container">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
  <div class="item item-5">5</div>
  <div class="item item-6">6</div>
  <div class="item item-7">7</div>
  <div class="item item-8">8</div>
  <div class="item item-9">9</div>
  <div class="item item-10">10</div>
  <div class="item item-11">11</div>
  <div class="item item-12">12</div>
</div>