为什么在项目收缩之前创建新行？

Question

我正在尝试创建一个网格，在创建新行之前缩小项目。相反，它总是创建新行并且从不收缩项目。

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 200px));
  justify-content: center;
  justify-items: center;
  grid-gap: 2em;
}

.grid > div {
  background: grey;
  min-height: 150px;
  min-width: 150px;
}

<div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

这是网格 1px 之前的照片，在缩小它会产生新行之前：

如您所见，每个单元格中的内容周围都有足够的空间。该内容的宽度为 150 像素。网格单元宽 200 像素，是其最小最大宽度的顶端，但拒绝变小。在创建任何新行之前，它应该缩小到 150 像素。

我在网上读到的或向人工智能询问的所有内容都表明我做得对。我正在使用 Opera GX，它确实支持此功能。

Answer 1

对于那些想知道的人，可以在这里找到答案：CSS网格不考虑minmax中的最小值以及自动调整

Minmax 不适用于 max 的 px 单位。

相反，你必须使用

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

然后在子项目上设置

max-width

。我不知道为什么。