在 grid-template-rows 中使用自动填充或自动调整：repeat(auto-fill, 200px) 仅设置第一行的高度 - 这是为什么？

Question

我想使用设置网格中每一行的行高grid-template-rows: repeat(auto-fill, 200px)，但意识到它仅适用于网格的第一行。事实证明grid-auto-rows: 200px更适合我的需求，但我仍然想知道为什么使用auto-fillingrid-template-rows: repeat(auto-fill, 200px)只设置第一行而不是所有行的高度。注意：如果我使用整数而不是auto-fill正确设置指定行数的高度。

图片示例：

• grid-template-rows: repeat(auto-fill, 200px)
• grid-template-rows: repeat(3, 200px)

Answer 1

从规格来看：

当auto-fill作为重复次数给出时，如果网格容器在相关轴上具有确定的大小或最大大小，则重复次数是不会导致网格溢出其网格容器的最大可能正整数（对待每个轨道）如果是确定的，则作为其最大轨道尺寸函数，否则作为其最小轨道尺寸函数，并考虑间隙）；如果任何重复次数都会溢出，则重复 1 次。否则，如果网格容器在相关轴上具有明确的最小尺寸，则重复次数是满足该最小要求的最小可能正整数。否则，指定的曲目列表仅重复一次。

这有点棘手，但auto-fill适合列定义，因为我们有一个最大大小，因为默认情况下元素将是全宽，但处理行和高度时情况并非如此。

除非您定义明确的高度，否则您很可能会陷入像您所面临的只有一次重复的情况：

.container {
  display:grid;
  grid-template-rows:repeat(auto-fill,200px);
  grid-gap:5px;
}

.container div {
   height:50px;
   background:red;
}

body {
  border:5px solid blue;
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

使用时，列定义中也会发生同样的情况inline-grid

.container {
  display:inline-grid;
  grid-template-columns:repeat(auto-fill,200px);
  grid-gap:5px;
}

.container div {
   height:50px;
   background:red;
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

正如您已经注意到的，正确的方法是使用grid-auto-rows: 200px