如何让CSS Grid项在指定宽度区间自适应并换行时占满整行？

你的代码存在两个核心问题：

• grid-template-columns中minmax(300px, 600px)的最大值是固定的600px，auto-fill会优先创建600px宽度的列，不会自动缩小列宽适配容器；
• 换行后列宽仍保持600px，无法随容器宽度调整为100%。

修正方案 #

修改grid-template-columns的取值，结合clamp()函数实现自适应宽度控制，同时修正语法错误：

.container {
  display: grid;
  /* 核心：用clamp限定列宽范围，容器不足600px时自动占满整行 */
  grid-template-columns: repeat(auto-fill, clamp(300px, 100%, 600px));
  /* 可选：添加项间距优化布局 */
  gap: 1rem;
  /* 确保容器占满视口宽度 */
  width: 100%;
  box-sizing: border-box;
}

.grid-item {
  height: 150px;
  /* 可选：添加背景色方便调试 */
  background-color: #f0f0f0;
}

代码解释 #

• clamp(300px, 100%, 600px)：
  • 容器宽度≥600px时，列宽取最大值600px，一行可容纳多个网格项；
  • 容器宽度在300px~600px之间时，列宽自动设为100%，换行后占满整行；
  • 容器宽度<300px时，列宽保持300px（若需避免横向滚动，可将最小值改为100%）；
• gap: 1rem：为网格项添加间距，避免布局拥挤；
• box-sizing: border-box：确保容器的padding/border不会额外增加宽度，保证布局准确。

另外，原代码中grid-template-columns末尾缺少闭合括号，这也是需要修正的语法错误。

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