grid-template-columns 本身不响应它只是按你写的值“照单分配”写死250px就永远250px真正起作用的是单位选择如minmaxauto-fit和viewport等配套设置。grid-template-columns 在移动端为啥不缩放卡片直接说结论grid-template-columns 本身不响应它只是按你写的值“照单分配”写死 250px 就永远 250px哪怕屏幕只有 320px。真正起作用的是你用的单位和配合的媒体查询逻辑。常见错误现象在 iPhone 上卡片溢出、横向滚动、或明明写了 repeat(auto-fit, minmax(280px, 1fr))) 却还是只显示一列——大概率是没加 viewport 元标签或者容器父级有固定宽度/未重置 box-sizing。minmax(280px, 1fr) 中的 280px 是最小宽度门槛小于这个值时整列会坍缩消失由 auto-fit 触发重排不是“尽量撑满”必须确保父容器宽度能随视口变化检查是否意外设置了 width: 100vw 或 max-width 等限制box-sizing: border-box 要全局设好否则 padding/margin 会让实际可用宽度小于预期移动端最稳妥的 grid-template-columns 写法别依赖 JS 或复杂媒体断点纯 CSS 下最可靠的是用 minmax() auto-fit 组合再配一个兜底的 max-width 控制单卡上限。使用场景新闻列表、商品卡片、用户头像墙等需要“尽可能多列但不挤变形”的地方。立即学习“前端免费学习笔记深入”推荐写法grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)) —— 这里 min(100%, 320px) 让最小列宽随屏幕变小而收缩避免小屏强制一列如果内容高度差异大加 grid-auto-rows: 1fr 防止某张卡片把整行拉高注意 Safari 旧版本iOS 15.4 之前对 min() 函数支持不全可降级为 minmax(280px, 1fr) 单独媒体查询覆盖为什么加了 grid-gap 还出现横向滚动条根本原因grid-gap或 gap是额外加在列宽之外的当所有列宽 所有 gap 总和超过容器宽度时就会触发溢出。这不是 bug是规范行为。 Mokker AI AI产品图添加背景