box-sizing: border-box未生效主因是伪元素未继承、第三方组件样式隔离或Safari兼容问题，需全局重置, ::before, *::after并单独处理；gap失效因父容器未box-sizing或子项width干扰；fr列宽不均因小数宽度舍入及gap占用空间；绝对定位偏移因Grid容器缺少position: relative。
box-sizing: border-box 为什么没生效
写了 box-sizing: border-box 却发现 Grid 子项仍因 padding/border 撑出轨道，大概率是伪元素或第三方组件绕过了它。浏览器中 ::before 和 ::after 默认不继承该声明，而清浮动、图标、装饰性内容常靠它们实现——一旦它们仍按 content-box 计算，就会多占几像素，累积起来就偏了。
必须写全：*,*::before,*::after{box-sizing: border-box;}，且这条规则要放在所有 CSS 的最顶部；React 组件、Web Component 或 Ant Design 这类 UI 库的 shadow DOM 内部样式完全隔离，外部声明无效，得在组件内单独加；Safari 旧版本对 input、textarea 的 box-sizing 支持不稳定，可额外加 padding: 0.375em; border: 1px solid; 并避免 line-height 干扰。
gap 失效或子项被挤窄
gap 不是“额外留白”，而是直接参与轨道总宽计算的刚性占位。比如 grid-template-columns: 1fr 1fr 1fr + gap: 10px，三列之间有 2 个 gap，总共要从容器宽度里扣掉 20px，再把剩下部分三等分。很多人忘了这点，以为 gap 只是视觉间隔。
- 检查父容器是否有
padding或border未被box-sizing: border-box覆盖，它们会进一步压缩可用空间 - 不要在子项上设
width或min-width，尤其别写width: 100%——它会强制占满轨道，无视gap预留 - 子项若含文字，记得加
min-width: 0和overflow: hidden，否则长单词或 URL 会撑裂轨道
fr 列宽不均等，是不是计算错了
fr 本身没问题，问题出在浏览器对“可用空间”的实际测量上：它会先扣除所有固定尺寸（比如 gap、border、padding），再把剩余像素按比例分给 fr 轨道。如果容器宽度是小数（如 799.5px），两个 1fr 就可能被舍入成 399px 和 400px，肉眼就能看出偏差。
- 用开发者工具检查
grid-container的Computed width，确认是否为整数 - 避免混用
px和fr：比如grid-template-columns: 200px 1fr 1fr，改用minmax(200px, 1fr) 1fr 1fr更可控 - 若必须固定侧边栏，写成
grid-template-columns: 200px minmax(0, 1fr)，minmax(0, 1fr)能防止内容撑大导致换行或溢出
绝对定位元素在 Grid 里跑偏了
Grid 容器默认是 position: static，不构成定位上下文。所有子元素里的 position: absolute 会向上找最近的相对/绝对定位祖先，而不是 Grid 容器本身。
解决办法很简单：给 Grid 容器显式加 position: relative。这个细节极容易被忽略，尤其当 Grid 嵌套在其他布局中时，定位参考点可能跳到意想不到的父级。
另外注意：display: contents 会让容器自身“消失”，其子元素提升为直接网格项——同时也会移除该容器的定位上下文能力，此时再加 position: relative 也无效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
