grid项加border后出现1px偏移或间隙不均，根本原因是默认box-sizing: content-box下border额外增加元素尺寸，而网格轨道按内容区分配；解决前提是全局设box-sizing: border-box并用gap替代margin，避免混用fr与固定单位。
为什么 Grid 项加 border 后会出现“1px 偏移”或间隙不均？
Grid 容器本身不合并边框，每个 grid-item 的 border 是独立绘制的，且属于盒模型一部分。当相邻项都设 border: 1px solid #000 时，视觉上会看到「2px 粗线」——这不是合并，而是两个 1px 边框紧挨着渲染，中间无 gap；但若容器设了 gap: 8px，而你又在 item 上加 border，实际占用空间就变成 gap + border，导致列宽计算错乱、内容左偏或换行异常。
outline 真的能替代 border 实现“无侵入式边框”吗？
可以，但有硬性前提：
-
outline不参与盒模型计算，不会撑开元素尺寸，也不会影响grid-template-columns的轨道分配 - 必须配
outline-offset控制距离，否则 outline 默认紧贴 border（若已有 border）或元素边缘（若无 border），容易和内容重叠 - outline 无法单独设置某一边（比如只要 top 和 bottom），它永远是四边闭合轮廓
- IE 不支持
outline-offset（IE11 及以下仅支持 outline，不支持 offset）
示例：让 grid-item 在 hover 时“浮起”一层轮廓，不扰动布局
.grid-item {
outline: 2px solid #007bff;
outline-offset: -2px; /* 向内收缩，模拟 border 效果 */
}
.grid-item:hover {
outline-color: #e74c3c;
outline-offset: 0; /* 恢复到外侧，避免遮挡文字 */
}
用 outline 替代 border 时，border-radius 还生效吗？
生效，但只影响元素自身形状，不影响 outline 的形态。outline 会自动跟随元素的圆角边缘绘制（这是它的默认行为），但它自身不支持 border-radius 属性。也就是说：
- 如果
.grid-item设了border-radius: 8px，它的 outline 也会呈现近似圆角（由浏览器自动拟合） - 但 outline 的“角”仍是软过渡，不能像 border 那样精确控制弧度；在小尺寸或高缩放下可能锯齿明显
- 若需严格对齐圆角视觉，建议仍用
border+box-sizing: border-box，而非依赖 outline 的拟合
真正该优先尝试的方案：不是换 outline，而是改盒模型
多数 Grid 边框偏移问题，根源不在 border 本身，而在默认 content-box 盒模型把 border 算进总宽里，干扰了 fr 或 minmax() 的等分逻辑。最稳的解法是：
- 全局加
* { box-sizing: border-box; }，让所有 grid-item 的width包含 border 和 padding - Grid 容器用
gap控制间距，item 内部用padding留白，彻底避开 border 对布局的干扰 - 只有当需要「焦点态轮廓不挤占空间」或「动态切换边框/无边框状态」时，才考虑
outline——它本质是交互辅助属性，不是布局工具
别为了“看起来像合并”强行用负 margin 或 outline-offset 微调像素，先确认是不是盒模型没切对。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
