grid子项默认content-box导致尺寸溢出，需同时设置minmax(0,1fr)和min-width:0，并统一box-sizing:border-box以防止padding/border叠加撑破轨道。
因为 content-box 让 width 和 height 只算内容区，padding 和 border 额外叠加，而 Grid 子项默认就是 content-box，不加干预就会撑破轨道。
box-sizing: content-box 是 Grid 子项的默认行为
Grid 容器本身不会改子项的盒模型——它只分配空间，不重写计算逻辑。子项仍按浏览器默认的 content-box 解析尺寸：比如你写了 width: 100%、padding: 12px、border: 1px solid，那实际占用宽度 = 内容区 100% + 左右 padding 24px + 左右 border 2px。哪怕父容器只有 300px 宽，子项也可能占到 326px。
- DevTools 的「Computed」面板里查
box-sizing，若显示content-box，就说明没被覆盖或重置 - 第三方组件、scoped style、CSS-in-JS 常悄悄把
box-sizing拉回content-box，尤其在*::before/*::after上漏掉重置时 -
input、textarea等表单元素自带 padding，且浏览器默认样式权重高，更容易“偷偷”保持content-box
content-box + fr 单位会放大溢出风险
1fr 不是最大宽度限制，而是等分剩余空间的指令；它先按子项的 min-content（比如一个长 URL）确定轨道最小宽度。在 content-box 下，这个 min-content 包含 padding/border，结果就是轨道被拉得比预期宽得多，其他列被压缩甚至消失。
- 仅靠
overflow: hidden无效：内容没“溢出”容器，是容器自己先变宽了 - 必须同时改两处：
grid-template-columns: minmax(0, 1fr)（轨道层允许缩到 0） +.grid > * { min-width: 0 }（子项层解除默认阻力） - 嵌套 Grid 或 Flex 子项也要同步加
min-width: 0，否则撑开会逐层传导
gap 和 margin 在 content-box 下更难控制
gap 是布局层间隙，不参与子项尺寸计算；但如果你误用 margin 替代 gap，又没配 box-sizing: border-box，那 margin 就会直接扩大子项总尺寸。例如 width: 100% + margin-right: 12px，子项就必然超出轨道宽度。
- 正确做法：把
gap: 12px写在 Grid 容器上，而不是给每个子项加margin - 若必须用
margin（如兼容老浏览器），得同步写width: calc(100% - 24px)并确保box-sizing: border-box生效 - 注意：iOS Safari 对
minmax(0, 1fr)在 Safari 14.1 及更早版本有解析异常，可用@supports (grid-template-columns: minmax(0, 1fr)))检测降级
真正难的不是知道要设 border-box，而是在多层嵌套中判断该在哪一层加——漏掉一层，溢出就还在那儿。尤其是图片、<pre class="brush:php;toolbar:false;"></pre>、<table> 这类固有尺寸元素，最容易被忽略。</table>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
