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

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