为何Grid布局中项目未先收缩就创建新行？

我想要实现一个Grid布局，让元素先收缩到最小宽度再换行，但实际效果是元素始终保持minmax的上限（200px），直接换行，从不收缩。

代码示例 #

CSS #

.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;
}

HTML #

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

问题现象 #

在网格即将触发换行前的状态下，每个单元格内容宽度为150px，容器仍有充足空间，但网格单元格始终保持200px，不会先收缩到150px再换行。使用的Opera GX浏览器支持Grid相关特性，查阅资料和AI回复均显示当前写法“正确”，但实际不符合预期。

问题原因与解决方法 #

问题核心在于justify-content: center属性：当设置该属性时，Grid容器会优先将现有宽度的列居中展示，允许容器两侧留白，浏览器判定当前布局已满足auto-fit与minmax的规则（列宽处于200px上限，整体居中），因此不会触发列宽收缩。

修正方案一：替换居中方式（推荐） #

移除justify-content: center，改用width: fit-content + margin: 0 auto实现容器居中，同时让Grid列能根据可用空间动态收缩：

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 200px));
  justify-items: center;
  grid-gap: 2em;
  width: fit-content;
  margin: 0 auto; /* 实现容器居中 */
}

.grid > div {
  background: grey;
  min-height: 150px;
  min-width: 150px;
  width: 100%; /* 让子元素占满列宽，优化视觉效果 */
}

修正方案二：替换auto-fit为auto-fill #

若需保留justify-content: center，可改用auto-fill替代auto-fit（注意：auto-fill会保留空列占位，auto-fit会折叠空列，需根据需求选择）：

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

原理说明 #

• width: fit-content让Grid容器宽度适配内部列的总宽度，结合margin: 0 auto实现居中，此时容器的可用空间会驱动列宽在minmax(150px,200px)范围内动态调整，达到“先收缩再换行”的预期效果。
• 子元素添加width: 100%可让灰色区块完全填充列宽，避免留白，优化视觉一致性。

内容的提问来源于stack exchange，提问作者Library Seph