自动填充和自动调整有什么区别？

Question

我正在使用 CSS 网格来实现卡片网格布局。

但我不太清楚如何调整 minmax() 语句来处理没有足够的项目来填充一行但仍需要它们看起来像卡片的用例！

如果我用静态 100px 替换最大 1fr 值，或者我使用小数 0.25fr，它会扰乱较小媒体尺寸的缩放。

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-column-gap: 17px;
  grid-row-gap: 25.5px;
  padding-bottom: 25.5px;
}
.card {
  background-color: #000;
  height: 100px;
}

<div class="wrapper">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

然后如果只有几个项目

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-column-gap: 17px;
  grid-row-gap: 25.5px;
  padding-bottom: 25.5px;
}
.card {
  background-color: #000;
  height: 100px;
}

<div class="wrapper">
  <div class="card"></div>
  <div class="card"></div>
</div>

Answer 1

关键是用auto-fill代替auto-fit。

当repeat()函数设置为auto-fit或auto-fill时，网格容器在不溢出容器的情况下创建尽可能多的网格轨道（columns/rows）。

请注意，在呈现网格容器时，网格项的存在与否无关紧要。容器只是按照指示布置列和行，创建网格单元格。它不关心单元格是否被占用。

使用 auto-fit，当没有足够的网格项目来填充创建的轨道数时，那些空轨道将被折叠。

以您的代码为例，当没有足够的网格项来填充行中的所有列时，这些空列将被折叠。空列使用的 space 变为空闲 space，然后在现有项目中平均分配。通过吸收免费 space，项目会增长以填满整行。

使用 auto-fill 时，除了不折叠空轨道外，一切都与 auto-fit 相同。它们被保存下来。基本上，网格布局保持固定，有或没有项目。

这是 auto-fill 和 auto-fit 之间的唯一区别。

下面是三个网格项的图示 auto-fill:

grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

下面是 auto-fit 的三个网格项的图示：

grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

规格参考：https://www.w3.org/TR/css3-grid-layout/#auto-repeat

Answer 2

简而言之， Auto-fit：适合容器的整个长度。 Auto-fill：不适合容器的整个长度。

自动填充和自动调整有什么区别？

What is the difference between auto-fill and auto-fit?

css

css-grid