html - 为什么 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

要在垂直方向上包裹网格，您需要做更多的事情:

• 为网格容器指定高度，以便网格项知道何时换行，

  <

• 还指定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 是一个 block 元素， block 元素具有视口(viewport)的宽度。您可以在此处使用 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.