自动填充和自动装配有什么区别？

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