gap设为0后仍有缝隙，是border或outline、font-size导致的空白间隙、box-sizing未设为border-box、margin/padding未全向清零、img默认基线对齐、伪元素注入内容及viewport缩放等多重因素共同造成。
gap设为0后仍有缝隙，是border或outline在捣鬼
浏览器默认给元素加了border或outline（比如聚焦时），或者父容器有font-size导致行内元素间产生空白间隙。单纯设gap: 0不够，得同步清理视觉干扰源。
- 检查每个网格项是否意外带
border: 1px solid——它会撑开实际占用空间，让“无缝”变假象 - 用
outline: none压制焦点框（尤其调试时点选触发的蓝边） - 如果子项是
img或inline元素，父容器加font-size: 0，子项再单独设字体大小 - 确认没漏掉
box-sizing: border-box，否则padding和border会额外增加尺寸
margin/padding清零必须覆盖所有方向与伪元素
只写margin: 0; padding: 0常失效，因为某些重置不彻底，或伪类（如::before）自带默认样式。
- 对网格容器和所有直接子项都显式声明：
margin: 0; padding: 0; border: 0; - 若用
img作网格项，加display: block——否则底部默认留白（基线对齐导致） - 检查是否有
*::before, *::after被全局样式注入内容或边距，必要时重置：content: "";+margin: 0; padding: 0;
grid-template-columns用fr单位比px更可靠
用固定像素（如200px）列宽+gap: 0看似无缝，但缩放或响应式下容易错位；fr配合minmax()能自适应容器，真正维持缝合感。
- 推荐写法：
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))，避免硬编码宽度引发溢出 - 慎用
grid-auto-columns——它不控制显式列定义，仅影响隐式网格，容易和grid-template-columns冲突 - 若需等宽列且严格无间隙，优先用
repeat(3, 1fr)而非1fr 1fr 1fr，语义更清晰、维护性更好
移动端viewport缩放会让1px border看起来像缝隙
设备像素比（dpr）大于1时，border: 1px可能渲染为0.5物理像素，浏览器自动模糊或加粗，造成视觉“缝”。这不是CSS bug，是渲染机制。
立即学习“前端免费学习笔记（深入）”；
- 用
border: 0.5px solid #000无效（非标准值），改用transform: scaleY(0.5)缩放伪元素模拟细边 - 更稳妥方案：彻底去掉
border，用box-shadow: 0 0 0 1px #ccc替代，它受dpr影响小 - 检查
meta name="viewport"是否含user-scalable=no——禁止缩放可规避部分dpr抖动，但牺牲可访问性，慎用
gap: 0变成摆设。 
