minmax()最小值设太大导致小屏横向滚动，应改用minmax(0, 1fr)并搭配auto-fit；需重置父容器约束、图片加max-width:100%和min-width:0；必要时用clamp()替代。
minmax() 的最小值设太大导致横向滚动
小屏幕下出现横向滚动条，90% 是因为 minmax(400px, 1fr) 这类写法——浏览器会死守 400px 这个最小宽度，哪怕屏幕只有 320px，它也硬要撑开容器。这不是 bug，是规范行为。
实操建议：
- 把固定像素最小值换成
0：minmax(0, 1fr)，允许轨道压缩到内容实际所需最小尺寸（比如文字换行后高度、图片 intrinsic size） - 搭配
auto-fit使用：repeat(auto-fit, minmax(0, 1fr))，空列会被丢弃，避免窄屏下意外留白或溢出 - 别写
minmax(0px, 1fr)，旧版 Safari 对0px兼容性差，0更稳妥
小屏不堆叠、不占满全宽的常见原因
写了 grid-template-columns: repeat(auto-fit, minmax(0, 1fr))，但小屏还是两列挤在一起？大概率是没关掉默认的多列依赖，或者父容器没释放宽度约束。
实操建议：
- 用媒体查询覆盖结构：在
@media (max-width: 480px)里把grid-template-columns改成1fr，同时重置grid-auto-flow为row - 确保父容器没设
min-width或固定width，否则 Grid 轨道被锁死，1fr也分不到空间 - 如果用了
grid-template-areas，小屏下必须重写整个模板，比如从"header nav main"改成"header""nav""main"
图片仍溢出容器，不是 Grid 问题而是子项没约束
Grid 容器没溢出，但里面的 .img-box 或 <img> 跑出边界——这说明溢出控制没落到真正该管的地方。
实操建议：
- 给图片加
max-width: 100%和height: auto，仅靠width: 100%不够，某些场景下会失效 - 如果
.img-box是 Grid 子项，它默认有min-width: auto保护，得显式加min-width: 0才能让它随 Grid 轨道收缩 - 别只在 Grid 容器上设
overflow: hidden，那是临时止血；真正要治，是让子项自己守规矩
要不要用 clamp() 替代 minmax()？
当业务明确要求「小屏至少 200px，大屏最多 300px，中间流体」时，minmax() 确实不够用——它只有两值，没法表达「首选值」。
实操建议：
- 直接用
clamp(200px, 1fr, 300px)，现代浏览器（Chrome/Firefox/Safari ≥15.4）已稳定支持 - 别嵌套写
minmax(clamp(...), 1fr)，语义混乱且无必要 - 注意
clamp()在 Grid 中的行为：它替代的是整个轨道尺寸，不是和1fr并存，所以写成repeat(auto-fit, clamp(200px, 1fr, 300px))就对了
min-width: 0 和图片的 max-width 组合，这两处一漏，再好的 Grid 配置也救不回溢出。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
