错位根本原因是padding与box-sizing、gap、grid-template-columns叠加导致浏览器对“可用空间”计算错误；伪元素不继承box-sizing需显式声明；gap是刚性占位；含文字子项需min-width: 0和overflow: hidden。
为什么卡片加padding后整体错位
错位不是因为用了padding，而是它和box-sizing、gap、grid-template-columns叠加后，浏览器对“可用空间”的计算逻辑被打破。比如你设了grid-template-columns: 1fr 1fr，又给每个卡片加padding: 16px，但没设box-sizing: border-box，那每个卡片实际宽度就变成1fr + 32px，直接撑爆容器。
必须写全box-sizing重置规则
* { box-sizing: border-box }经常不管用，因为伪元素（如::before、::after）不继承该声明。很多 UI 库、清浮动代码、图标组件都依赖伪元素，只要它们还是content-box，就会多出几像素偏差。
- 必须在所有 CSS 最顶部写：
*, *::before, *::after { box-sizing: border-box; } - 第三方组件（如 React 的
Button）可能覆盖该规则，需在组件级单独加 - 表单控件在旧版 Safari 中对
box-sizing响应不稳定，可额外加padding: 0.375em; border: 1px solid;
gap 和 padding 混用时的刚性冲突
gap 不是“视觉留白”，它是刚性占位——会从容器总宽里直接扣除。比如grid-template-columns: 1fr 1fr + gap: 12px，实际分配空间是容器宽度减去12px，再二等分。此时若子项还写了width: 100%，就会无视gap强占整列。
- 别在 grid-item 上写
width: 100% - 含文字的子项务必加
min-width: 0和overflow: hidden，防长单词或 URL 撑开轨道 - 父容器若有
padding或border，也得走box-sizing: border-box，否则进一步压缩可用空间
调试时最易忽略的 baseline 干扰
哪怕所有卡片高度一致，含文字的项和纯图片项仍可能上下偏移几像素——这是字体基线（baseline）干扰。开发工具 Layout 面板里勾选 “Highlight grid tracks” 能看出轨道是否按预期渲染，但 baseline 偏移藏得更深。
- 统一用
align-items: start或align-items: center，避免默认stretch拉伸不均 - 文字类子项加
display: flex; align-items: center;是兜底方案，但优先调容器级align-items - 检查
line-height是否一致，尤其混用不同字号时，line-height: 1.4比line-height: 20px更安全
真实项目里，对齐偏差往往不是单一原因，而是box-sizing漏掉伪元素、gap被width覆盖、baseline未约束这三者同时松动的结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
