css - 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.2px（为什么？）

在火狐中：

• 第 11 项和第 12 项确实有紫色背景（我认为应该如此）
• 第一行的高度是 18.4px，这是 div 中项目的高度，我认为这是正确的行为

任何想法为什么会发生这种情况？

标签： cssgoogle-chromefirefoxcss-grid

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>