grid子项撑破轨道是因box-sizing: content-box、min-width: auto和margin叠加导致，需在子项显式设box-sizing: border-box和min-width: 0，并用minmax(0, 1fr)替代1fr。
Grid子项撑破轨道，不是CSS写错了，而是盒模型默认行为没被覆盖——box-sizing: content-box、min-width: auto、margin三者叠加，浏览器照单全收，根本不会帮你“算减法”。
为什么box-sizing: border-box必须显式写在子项上
Grid容器不改子项的盒模型计算方式，子项仍按content-box解析：你写width: 100% + padding: 12px，实际宽度 = 内容区100% + 左右padding，必然溢出轨道。
- 不能依赖全局
* { box-sizing: border-box }，第三方组件或all: unset可能覆盖它 - 必须在关键子项（尤其是含
width: 100%或max-width: 100%的）上直接声明box-sizing: border-box - 用DevTools的「Computed」面板确认值确实是
border-box，不是继承来的content-box
minmax(0, 1fr)替代1fr才能真正收缩
1fr等价于minmax(auto, 1fr)，而auto就是min-content——长URL、未换行文本、图片原始尺寸都会把轨道拉宽。只加overflow: hidden到容器上，完全无效。
- 把
grid-template-columns: 1fr 2fr改成grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) - 必须同步给网格容器的**直接子元素**加
min-width: 0（水平方向）或min-height: 0（垂直方向） - 若子项内部还有
display: grid或display: flex，它的直接子元素也得加min-width: 0，否则撑开会传导
gap比margin更安全，但别滥用auto-fit
gap是布局层间隙，不参与子项尺寸计算；margin属于子项自身盒模型，会扩大总尺寸——尤其当子项用width: 100%时，margin会让它直接超出轨道。
- 优先用
gap: 8px代替给每个子项加margin-right -
repeat(auto-fit, minmax(200px, 1fr)))容易因最小宽度卡住，导致列数远少于预期——调试时看DevTools里「Computed」下的实际列数，不是代码写的 -
auto-fill会生成所有可能列（哪怕空着），auto-fit会合并空列，但两者都可能因minmax下限触发溢出
图片和替换元素最容易翻车
<img>、<iframe></iframe>这类替换元素默认拒绝压缩，min-width: 0加在它自己身上没用，必须作用于它的父网格项。
- 给网格项（即
.grid > img的父元素）加min-width: 0 - 图片自身设
width: 100%+height: auto（保比例）或width: 100%+height: 100%+object-fit: cover（填满） - 绝对定位方案更彻底：父项
position: relative，图片position: absolute; top: 0; left: 0; width: 100%; height: 100%
最难的不是记住minmax(0, 1fr)这行代码，而是判断该在哪一层加min-width: 0——漏掉一层，溢出就还在那儿，且DevTools里看不出明显报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
