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

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

When auto-fill is given as the repetition number, if the grid container has a definite size or max size in the relevant axis, then the number of repetitions is the largest possible positive integer that does not cause the grid to overflow the content box of its grid container (treating each track as its max track sizing function if that is definite or as its minimum track sizing function otherwise, and taking gap into account); if any number of repetitions would overflow, then 1 repetition. Otherwise, if the grid container has a definite min size in the relevant axis, the number of repetitions is the smallest possible positive integer that fulfills that minimum requirement. Otherwise, the specified track list repeats only once.

---

行方向自动填充更简单

注意这里，你不需要指定宽度因为display: grid是一个块元素和块元素具有视口的宽度。您可以在这里使用 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

The grid-auto-flow CSS property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.

grid-auto-flow 的默认值是 row 这就是为什么你需要 覆盖 到 column:

row

The auto-placement algorithm places items by filling each row in turn, adding new rows as necessary. If neither row nor column is provided, row is assumed.