为什么CSS Grid的自动填充属性在列方向上不起作用

Question

我正在练习使用行自动填充属性，但是，它没有达到我的期望。我想创建高度为minmax(140px, 200px)的行，但改成一行高度为200px，其余为18px。为什么会发生？

body,
html {
  height: 100%;
  margin: 0;
}

.wrapper {
  display: grid;
  grid-template-rows: repeat(auto-fill, minmax(140px, 200px));
}

.wrapper>div:nth-child(odd) {
  background-color: red;
}

<div class="wrapper">
  <div class="one"> 1 </div>
  <div class="one"> 1 </div>
  <div class="one"> 1 </div>
  <div class="one"> 1 </div>
  <div class="one"> 1 </div>
</div>

Answer 1

要沿垂直方向包装网格，您还需要做更多的事情：

• 为网格容器指定一个height，以便网格项知道何时包装，

• 还指定grid-auto-flow: column（覆盖默认的grid-auto-flow: row）

请参见下面的演示（已设置height: 100%作为说明）：

body,
html {
  height: 100%;
  margin: 0;
}

.wrapper {
  display: grid;
  grid-template-rows: repeat(auto-fill, minmax(140px, 200px));
  grid-auto-flow: column; /* added */
  height: 100%; /* adjust this*/
}

.wrapper>div:nth-child(odd) {
  background-color: red;
}

<div class="wrapper">
  <div class="one"> 1 </div>
  <div class="one"> 2 </div>
  <div class="one"> 3 </div>
  <div class="one"> 4 </div>
  <div class="one"> 5 </div>
</div>

---

为什么要指定高度？

因为auto-fill或auto-fit在该轴上需要确定的尺寸：

  

7.2.3.2. Repeat-to-fill: auto-fill and auto-fit repetitions

     

如果将自动填充指定为重复编号，则网格为   容器在相关轴上具有确定的大小或最大大小，然后   重复次数是最大可能的正整数   不会导致网格溢出其网格的内容框   容器（将每个轨道作为最大轨道大小调整功能，如果   这是确定的，或者是其最小轨道大小调整功能，   并考虑到差距）；如果重复多少次   溢出，然后重复1次。否则，如果网格容器具有   在相关轴上确定的最小尺寸，重复次数为   满足该最小值的最小可能的正整数   需求。否则，指定的曲目列表将仅重复一次。

---

在行方向自动填充更简单

请注意，在这里您不需要指定宽度，因为display: grid是 block元素，而block元素具有视口的宽度。您可以在此处使用grid-template-columns: repeat(auto-fill, minmax(140px, 200px))

body,
html {
  height: 100%;
  margin: 0;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 200px));
  /*grid-auto-flow: row; --> default (so not needed) */
}

.wrapper>div:nth-child(odd) {
  background-color: red;
}

<div class="wrapper">
  <div class="one"> 1 </div>
  <div class="one"> 2 </div>
  <div class="one"> 3 </div>
  <div class="one"> 4 </div>
  <div class="one"> 5 </div>
</div>

---

为什么grid-auto-flow: column？

从其定义中查看相关摘录-如果未明确放置网格项目在网格容器中，此属性将控制其流动：

  

grid-auto-flow

     

grid-auto-flow CSS属性控制自动放置的方式   算法的工作原理，确切指定自动放置的商品如何流动   进入网格。

grid-auto-flow的默认值为row，这就是为什么您需要将其覆盖到column的原因：

  

row

     

自动放置算法通过依次填充每一行来放置项目，   根据需要添加新行。如果既没有提供行，也没有提供列，   假定为行。