grid-template-columns 本身不响应，它只是按你写的值“照单分配”，写死250px就永远250px；真正起作用的是单位选择（如minmax+auto-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，是规范行为。
错误现象：卡片正常排列，但页面底部或右侧出现隐藏滚动条，手指一滑就偏移。
- 用
overflow-x: hidden治标不治本，可能切掉阴影或圆角边缘 - 真正解法是让
gap参与计算：把容器设为padding: 0 16px，然后用margin: 0 -16px抵消 gap 外扩，再靠justify-content: center居中对齐 - 更干净的做法：改用
column-gap和row-gap分开控制，并确认父容器width没被border或outline影响
兼容性陷阱：iOS Safari 对 grid 的特殊处理
iOS Safari（尤其 iOS 14–15）对 grid-template-columns 中的 fr 单位有渲染延迟，且不支持 subgrid，但更隐蔽的问题是：它会忽略某些嵌套 grid 的 minmax() 下限，导致卡片突然塌成一条线。
性能影响：在长列表中，过度使用 auto-fit + 大量卡片会触发频繁重排，滚动略卡顿。
- 加
contain: layout style paint到卡片容器上，能显著改善 iOS 滚动表现 - 避免在
grid-template-columns里混用px和%，Safari 容易算错剩余空间 - 真要兼容 iOS 13，老老实实用
@media (max-width: 480px)降级为display: flex; flex-wrap: wrap
最常被忽略的一点：移动端 touch 区域太小，卡片内交互元素（比如“收藏”按钮）没做 min-height: 44px 或 padding 补偿，用户点不中——这跟 grid 无关，但和“响应式卡片”强相关，上线前务必摸着屏幕点一遍。
