Grid子项溢出主因是box-sizing未设为border-box，导致padding/border额外叠加撑出轨道；需显式设置box-sizing: border-box、max-width: 100%及min-width: 0，并区分gap（布局层）与margin（元素级）语义。
Grid子项溢出是因为box-sizing没设成border-box
Grid容器本身不改变子项的盒模型计算方式，子项仍按默认box-sizing: content-box解析——也就是width和height只算内容区，padding和border额外叠加。比如一个grid-template-columns: 1fr的列里放了width: 100%; padding: 16px的子项，实际宽度 = 内容区100% + 左右padding，必然撑出网格轨道。
- 必须对关键子项显式声明
box-sizing: border-box，不能依赖全局重置（第三方组件样式可能覆盖） - 在DevTools的「Computed」面板里确认
box-sizing值确实是border-box，而非被all: unset或继承值覆盖 - 若子项还用了
width: 100%，需同步加max-width: 100%，否则某些旧版Firefox会忽略box-sizing对百分比宽度的约束
overflow在Grid子项上无效的真正原因
overflow属性只在块级格式化上下文（BFC）中裁剪内容，而Grid子项默认不是BFC；更重要的是，overflow控制的是“内容渲染”，不干预子项在网格轨道中的尺寸分配逻辑。即使给子项设了overflow: hidden，它在主轴方向占用的空间仍由grid-template-columns或fr单位决定，不会自动收缩。
- 想让子项内容被裁剪，得先限制它的内容区域：比如
max-width: 0; min-width: 0; overflow: hidden配合white-space: nowrap - 想让整个网格容器横向滚动，
overflow-x: auto必须设在Grid容器上，而不是子项上 - iOS Safari对
overflow-x: auto支持弱，需加-webkit-overflow-scrolling: touch或overscroll-behavior-x: contain
gap替代margin才能避免视觉溢出
Grid的gap是布局层间隙，不参与子项尺寸计算；而margin属于子项自身盒模型，会扩大其总尺寸，导致即使box-sizing: border-box也压不住——尤其当子项用width: 100%时，margin会让它超出轨道宽度。
- 把父容器的
gap: 12px写在Grid容器上，而不是给每个子项加margin-right - 若必须用
margin（比如兼容老浏览器），得同步给子项加calc(100% - 24px)宽度，并确保box-sizing: border-box生效 - 注意
gap不适用于grid-auto-flow: dense场景，此时仍需靠margin控制间距，但要额外检查是否触发溢出
响应式Grid中viewport宽度引发的溢出
用width: 100vw做Grid容器宽时，若页面有垂直滚动条，100vw会包含滚动条宽度（通常16px），导致容器实际比视口宽，子项随之撑出边界——这在移动端尤其明显。
立即学习“前端免费学习笔记（深入）”；
- 优先用
width: 100%，并确保父容器有明确content width（比如body { margin: 0; }） - 实在要用
vw，改用width: calc(100vw - var(--scrollbar-width, 0))，并通过JS注入滚动条宽度变量 - 检查是否启用了
scrollbar-gutter: stable，它能预留滚动条空间，避免布局抖动，但不解决100vw本身的计算偏差
Grid布局的溢出问题本质不是overflow失效，而是盒模型、尺寸分配逻辑和渲染层三者错位。最常被忽略的是：子项是否真正在BFC中，以及gap和margin的语义差异——前者是布局指令，后者是元素属性，混用就容易漏掉一个像素的溢出。
