min-width: auto在窄屏下锁死Grid轨道，因浏览器优先满足子项min-content，导致minmax()最小值失效；需同步设置minmax(0,1fr)、子项min-width:0及图片width:100%才能真正收缩。
min-width: auto 在窄屏下直接“锁死”轨道
Grid 轨道的最小宽度不是由 minmax() 单方面决定的，而是浏览器在分配空间时，会优先满足子项的 min-width: auto（即 min-content）。窄屏下可用宽度骤减，但一张未约束的图片、一个长 URL 或一段无空格英文，仍会强制拉宽整列——minmax(280px, 1fr) 的 280px 就被架空了。你看到的“列变窄”，其实是轨道被撑爆后触发横向滚动，或内容溢出容器边缘。
gap 和 padding 在窄屏下成倍放大挤压效应
比如父容器有 padding: 1rem，网格设 gap: 1.5rem，两列布局实际需要至少 2 × min-width + 1.5rem + 2 × 1rem。当屏幕只有 375px 宽时，仅边距和间隙就占掉约 56px，留给内容的空间远低于预期。这时哪怕写了 minmax(280px, 1fr)，浏览器也根本分不出两个 280px 的轨道，只能退化失败或强行溢出。
图片和替换元素默认不收缩，窄屏首当其冲
<img alt="为什么CSS Grid在窄屏下更容易暴露最小宽度问题？" >、<iframe></iframe> 等替换元素天生带 min-width: auto，且不会响应 width: 100% 除非它的父容器已明确“松绑”。窄屏下，如果网格项没加 min-width: 0，再配 width: 100% 也没用——父容器自己还被锁着，子元素根本收不进去。常见现象：小屏上图片一半露在外面，object-fit 完全无效，overflow: hidden 也不裁剪。
auto-fit + minmax() 在窄屏下容易误判“可容纳列数”
repeat(auto-fit, minmax(280px, 1fr)) 看似智能，但浏览器计算“能放几列”时，只看容器总宽是否 ≥ 单列最小宽 + gap，不考虑子项真实内容。结果就是：375px 宽的屏幕“算出来能放一列”，但里面塞了个 1200px 宽的图，轨道还是被撑开。真正起效要三者齐备：minmax(0, 1fr)（让轨道可压缩）、网格项加 min-width: 0（解除子项锁定）、图片加 width: 100%（落实收缩）。
立即学习“前端免费学习笔记（深入）”；
窄屏暴露问题，本质是把所有隐性约束推到极限——min-width: auto、未设限的替换元素、未协调的 gap 和 padding，都会在同一时刻集中爆发。修复不能只改一行 grid-template-columns，得从轨道定义、子项样式、内容类型三层同时动手。 
