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

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 之间的唯一区别。

下面是三个带有自动填充的网格项的图示:

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