minmax(0, 1fr)配合auto-fit是解决移动端grid溢出的核心方案：它允许轨道压缩至0，避免硬撑宽度，再结合子项min-width: 0和box-sizing: border-box才能彻底防溢出。
minmax() 的最小值在小屏上硬撑容器
移动端宽度溢出最常见原因就是 minmax(300px, 1fr) 这类写法。浏览器会严格遵守第一个参数（最小轨道尺寸），哪怕屏幕只有 320px，它也要给每列留足 300px —— 剩下 20px 还得塞 gap、padding、border，不溢出才怪。
-
minmax(0, 1fr)是更安全的替代：0 允许轨道压缩到内容可接受的最小尺寸（比如换行后的文字高度、图片固有宽） - 别用
minmax(auto, 1fr)，它等价于minmax(min-content, 1fr)，长文本照样撑开 - 慎用
minmax(0px, 1fr)：旧版 Safari 对0px解析不稳定，0更稳妥
auto-fill 在窄屏下保留空轨道导致错觉溢出
写了 repeat(auto-fill, minmax(0, 1fr)) 却发现手机上横向滚动？那很可能是用了 auto-fill 而非 auto-fit。前者会把剩余空间切分成“空轨道”占位，后者直接把空间分给已有列——多数响应式场景该用 auto-fit。
- 正确写法：
grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); -
auto-fit+minmax(0, 1fr)是移动端友好的黄金组合 - 如果某列必须保底（如头像），单独对该列用
minmax(min-content, 1fr)，别全局滥用
子项未设 min-width: 0 导致 overflow 失效
给 Grid 容器加了 overflow-x: auto 却没滚动条？问题不在容器本身，而在子项默认有 min-width: auto 保护机制——浏览器宁可撑破容器，也不愿收缩内容。
- 关键修复：对需要横向滚动的子项显式加
min-width: 0 - 若子项内部是 Flex 或嵌套 Grid，也要在它里面加
min-width: 0 - 配合
overflow: hidden+text-overflow: ellipsis+white-space: nowrap控制单行长文本 - 避免同时使用
transform或will-change，它们会破坏滚动层合成，iOS Safari 尤其敏感
box-sizing 混乱让 gap 和 padding “偷偷加宽”
gap 本身不增加容器总宽，但如果你或第三方组件用了 box-sizing: content-box（默认值），那么 padding 和 border 就会额外撑出空间，视觉上就像溢出了。
- Grid 容器和所有子项都应显式声明
box-sizing: border-box - 全局重置后，注意回退第三方组件（如
.ant-card）可能依赖content-box - 用 DevTools 的 “Show box model” 查看三层尺寸：border box 是否真超限？padding 区是否侵占了内容区？
- 高 DPI 屏或缩放 125% 时，subpixel 四舍五入可能多占 1–2px，这也是临界溢出的隐藏原因
minmax(0, 1fr)，但子项没加 min-width: 0，overflow 还是不生效；或者修好了 box-sizing，却忘了 SwiperJS 这类组件需要额外加 min-width: 100% 才尊重网格轨道。真正起作用的，永远是那一两个被忽略的“兜底”声明。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
