grid本身无法解决1px边框物理像素过粗问题，需配合伪元素+transform:scale()；但grid容器影响伪元素定位与缩放基准，须显式设position:relative、box-sizing:border-box，并注意gap、padding及place-content等属性干扰。
直接用 grid 本身解决不了 1px 边框的“物理像素过粗”问题——它和边框渲染无关，只管布局。真正起作用的还是伪元素 + transform: scale()，但 Grid 容器会影响伪元素定位和缩放基准，必须协同处理。
Grid 容器里伪元素定位失效怎么办
Grid 子项默认是 display: block，但一旦设了 display: grid 或 display: inline-grid，它的子元素（包括 ::after）会受网格轨道约束，position: absolute 可能脱离预期参照系。
- 父容器必须显式加
position: relative，不能依赖 Grid 自带的定位上下文 - 如果 Grid 子项本身是
grid-area或设置了place-self，::after的top/left/bottom/right会相对于该网格单元的 content-box 起算，而非整个 Grid 容器 - 避免在 Grid 子项上同时用
justify-self和position: absolute—— 二者冲突时，Chrome 可能忽略top值
Grid 列间距（gap）和 1px 边框缩放冲突
gap 是逻辑像素单位，不会随 dpr 缩放；而伪元素边框缩放后若没对齐网格线，视觉上会出现“半像素错位”，尤其在左右滑动时明显抖动。
- 给 Grid 容器加
will-change: transform可缓解重绘抖动，但治标不治本 - 更稳的做法：把边框伪元素画在 Grid 容器外部，用
grid-template-areas预留 1 行/列作为“边框轨道”，再用背景色模拟，避开缩放 - 若必须用伪元素，
transform-origin必须设为0 0（不是left top），否则gap存在时缩放中心偏移
Grid 中四边 1px 边框缩放后边缘溢出
Grid 子项设 border: 1px 再缩放，或伪元素 width: 200% + scale(0.5) 在 Grid 下容易多出 1px 白边——根本原因是 Grid 默认 box-sizing: border-box，但伪元素未继承，导致尺寸计算错位。
- 伪元素必须显式声明
box-sizing: border-box - 不要用
border: 1px solid，改用background-color+height: 1px（下边框）或width: 1px（左边框），规避 border 渲染毛边 - Grid 容器若设了
padding，伪元素的left: 0/top: 0会从 padding-box 起算，需手动减去padding值
Grid 和 1px 边框缩放不是互斥方案，而是叠加关系：Grid 管布局节奏，缩放管像素精度。最容易被忽略的是 Grid 子项的 place-content 和 align-items 会悄悄改变伪元素的 transform-origin 参照点，调试时得先关掉这些属性单独验证缩放效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
