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

2024-03-29

我正在练习用行自动填充属性，但是，它并没有按照我的意愿进行。我想创建具有高度的行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>

To wrap垂直方向的网格你还需要做更多的事情：

指定一个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>

为什么要指定高度？

Because auto-fill or auto-fit需要该轴上的确定尺寸：

7.2.3.2. Repeat-to-fill: auto-fill and auto-fit repetitions https://drafts.csswg.org/css-grid/#auto-repeat

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

行方向自动填充更简单

请注意，这里，你不需要指定宽度 as display: grid is a 块元素块元素具有视口的宽度。你可以只使用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>

Why `grid-auto-flow: column`?

请参阅其定义的相关摘录 - 该属性控制如何网格项目流在一个网格容器如果没有明确放置它们：

grid-auto-flow https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow

grid-auto-flow CSS 属性控制自动放置的方式算法有效，准确指定自动放置的项目如何流动进入网格。

默认值为grid-auto-flow is row这就是为什么你需要override it to column:

row https://drafts.csswg.org/css-grid/#propdef-grid-auto-flow

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

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

verticalalignment

cssgrid