使用auto-fit的Grid布局在小屏幕（<350px）溢出问题修复问询

问题原因 #

你当前的minmax(350px, 1fr)规则给列宽设置了强制最小350px的限制。当屏幕宽度小于350px时，列无法收缩到容器宽度范围内，因此会出现横向溢出。

解决方案 #

要实现「优先保持350px列宽，空间不足时自动收缩」的效果，需要让列宽的最小值能自适应容器宽度，同时保留理想的350px列宽。推荐使用clamp()函数实现动态调整：

修改后的CSS代码：

.grid {
  display: grid;
  /* clamp(最小宽度, 首选宽度, 最大宽度) */
  grid-template-columns: repeat(auto-fit, clamp(280px, 100%, 350px));
  gap: 1rem;
}
.item {
  background-color: crimson;
  height: 200px;
  border-radius: 2rem;
}

代码说明 #

• 350px：这是你期望的理想列宽，当屏幕空间足够时，列会保持这个宽度
• 100%：当屏幕宽度小于350px时，列宽自动占满容器宽度，彻底避免溢出
• 280px：列宽的最小限制（可根据需求自行修改），防止列在极端小屏幕上变得过窄

如果不需要最小宽度限制，也可以用更简洁的写法：

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
  gap: 1rem;
}

这种写法会在容器宽度≥350px时保持350px列宽，容器宽度<350px时让列宽铺满容器，同时1fr保证多列布局时能合理分配剩余空间。

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