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

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 时，网格容器会在不溢出容器的情况下创建尽可能多的网格轨道（列/行）。

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

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

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

使用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