为什么CSS Grid的自动填充属性在列方向上不起作用 [英] Why is auto-fill property of CSS Grid not working in column direction

问题描述

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

I am practicing auto-fill property with rows, however, it is not doing what I desire. I want to create rows with height minmax(140px, 200px), but instead get one row with 200px height and the rest are 18px. Why is it happening?

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>

推荐答案

要在垂直方向上包装网格，必须做更多的事情：

To wrap grid in vertical direction you have to do a bit more:

• 为网格容器指定高度，以便网格项目知道何时包装，

• specify a height for the grid container so that the grid items know when to wrap,

还指定 grid-auto-flow：列（覆盖默认的 grid-auto -flow：行）

请参见下面的演示（已设置高度：100％，以供说明）：

See demo below (have set height: 100% for illustration):

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>

因为自动填充或自动拟合需要在该轴上确定尺寸：

Because auto-fill or auto-fit requires a definite dimension in that axis:

7.2.3.2。重复填充：自动填充和自动拟合重复

给出自动填充后作为重复次数，如果网格
容器在相关轴上具有确定的大小或最大大小，则
重复次数是不会引起网格的最大可能的正整数
使其网格
容器的内容框溢出（如果
是确定的，则将每个轨道作为其最大轨道缩放功能；否则，将其作为最小轨道缩放功能，将
并考虑间隙） ;如果任何重复次数将导致
溢出，则将执行1次重复。否则，如果网格容器在相关轴上具有
的确定最小大小，则重复次数为
，这是满足该最小
要求的可能的最小正整数。否则，指定的曲目列表仅重复一次。

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元素具有视口的宽度。您可以只使用 grid-template-columns：repeat（自动填充，minmax（140px，200px））此处：

---

Auto-fill in row direction is simpler

Note that here, you don't need to specify a width as display: grid is a block element and block elements have the width of the viewport. You can just use grid-template-columns: repeat(auto-fill, minmax(140px, 200px)) here:

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>

请参阅相关摘录从其定义开始-如果未明确放置网格项目在网格容器中的流动，则此属性将对其进行控制：

See the relevant excerpts from its definition - this property controls how grid items flow in a grid container if they are not explicitly placed:

网格自动流动

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

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

网格自动流的默认值为行，这就是为什么您需要覆盖到列：

The default value of grid-auto-flow is row which is why you need to override it to column:

行

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

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.

这篇关于为什么CSS Grid的自动填充属性在列方向上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！