如何用CSS Grid实现元素在260px-400px间弹性适配？

问题原因 #

你使用的grid-template-columns: repeat(auto-fit, minmax(260px, 400px))逻辑本身没问题，但实际效果不符合预期可能有两个原因：

1. 网格项被设置了固定宽度（比如width: 400px），导致Grid无法调整其宽度
2. 你测试的视口宽度范围刚好卡在“能容纳整数个400px列”的区间，误以为列宽无法收缩

验证基础条件 #

先确保以下两点：

• 网格容器设置width: 100%（或inline-size: 100%），确保它响应视口宽度变化
• 网格项不要设置固定宽度，让Grid完全控制其尺寸

实现预期效果的最优写法 #

如果想要严格实现“列宽在260px-400px之间弹性变化，视口空间足够时自动新增列，列宽回落到260px循环”的效果，推荐结合minmax和网格项的max-width限制：

.grid-container {
  display: grid;
  /* 用1fr让列尽可能占据可用空间，同时限制最小宽度260px */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem; /* 必须添加间距，否则列会直接撑满容器边缘 */
}

.grid-item {
  /* 限制项的最大宽度为400px，避免列宽超过预期 */
  max-width: 400px;
  /* 可选：让项在列中居中，避免剩余空间留白 */
  margin-inline: auto;
}

效果说明 #

• 视口宽度<260px：单列，列宽固定为260px（达到minmax的最小值）
• 260px ≤ 视口宽度 < 520px + 1rem：单列，列宽随视口扩大至400px后不再增长
• 520px + 1rem ≤ 视口宽度 < 800px + 2rem：两列，每列从260px开始随视口扩大，直到400px
• 视口宽度≥800px + 2rem：自动新增第三列，列宽回落至260px左右，再随视口扩大到400px，以此循环

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