边框错位的根本原因是box-sizing: content-box下border增加元素尺寸，而网格轨道按内容区分配；解决方法是全局设box-sizing: border-box并用gap替代margin，避免混用fr与固定单位。
grid布局中边框错位是因为bo
rder破坏了网格轨道计算
直接给grid-item加border会导致元素实际尺寸变大，但grid-template-columns/rows分配的是“内容区域宽度”，于是边框会向外溢出、相邻项不对齐。这不是bug，是盒模型的自然表现。
- 默认
box-sizing: content-box，border额外增加尺寸 - 网格容器不会自动为
border预留空间，除非你显式用gap或调整fr比例 - 最稳妥解法是统一改用
box-sizing: border-box
所有grid子项必须设box-sizing: border-box
这是对齐边框最简单也最可靠的前提。否则即使调gap或padding，不同项目边框粗细不一时仍会错位。
*, *::before, *::after {
box-sizing: border-box;
}或者只针对网格项：
.grid-container > * {
box-sizing: border-box;
}- 设在
*::before/*::after是为了兼容伪元素参与布局的情况 - 不要只写
.grid-item——万一漏写某个子元素，它就会突然“凸出来” - 这个声明必须在任何
border样式之前生效，否则无效
用gap替代margin控制项间距离
很多人用margin模拟间距，但margin会受border影响且无法被网格容器统一管理；gap是网格原生属性，作用于轨道之间，天然绕过边框干扰。
-
gap: 1px比margin: 1px更稳定——它始终在轨道间隙里，不改变子项尺寸 - 若需“带边框的网格线效果”，可设
gap: 2px+border: 1px solid #ccc，视觉上就是1px分隔线 - 注意：
gap不适用于grid-template-areas中跨区域的项，此时需靠padding微调
需要精确像素对齐时，避免混用fr和px/em/%
当某列用1fr、另一列用200px，再加border后，浏览器可能因小数像素四舍五入导致边框偏移1px——尤其在缩放或高DPI屏下明显。
- 全用
px（如grid-template-columns: 200px 200px 200px）+box-sizing: border-box最可控 - 若必须响应式，优先用
minmax(0, 1fr)代替纯1fr，防止内容撑开破坏边框对齐 - 调试时打开浏览器开发者工具的“显示网格线”（Layout → Grid），看蓝色轨道线是否与边框重合——不重合就说明盒模型或gap没配对
边框对齐本质是尺寸控制问题，不是网格语法问题。把box-sizing设对、gap用准、单位别乱混，95% 的错位都会消失。剩下5% 通常是字体渲染或缩放导致的亚像素问题，得靠transform: translateZ(0)或强制整数width硬控。
