根本原因是box-sizing未统一，content-box下width仅指内容区，padding/border额外加宽导致三列总宽超100%；解决需统一设border-box、用grid的1fr或flex的flex-basis:0，并合理分配padding位置。
根本原因不是卡片写错了宽度，而是盒模型没统一、padding/border在content-box下偷偷加宽了。
为什么 width: 33.33% 的三列总宽会超 100%
浏览器默认用 box-sizing: content-box，width: 33.33% 只管内容区，padding 和 border 是额外往外撑的。三列加起来实际宽度 = 父容器 content × 33.33% × 3 + 所有 padding × 6 + 所有 border × 6 —— 必然掉行。
- 在 Chrome DevTools 的 Computed 面板里点开盒模型图示，一眼就能看到 padding/border 是否“额外加”
- 哪怕用了
display: grid，子项仍是content-box+padding: 16px，内容区会被压缩，列宽视觉不均 - 全局重置最稳妥：
* { box-sizing: border-box; }或更完整：*, *::before, *::after { box-sizing: border-box; }
flex 布局中 flex-basis 计算被 padding 干扰怎么办
flex-basis: auto（默认值）会先按内容宽度算，再叠加 padding/border，容易导致卡片被压缩、文字折行或图标错位。
- 显式设
flex-basis: 0或flex-basis: calc(33.33% - 1rem)，切断内容对基准宽度的影响 - 配合
flex-grow: 1让卡片均分剩余空间，比单纯width: 33.33%更可靠 - 避免只写
width不写flex-basis，尤其当卡片含图片或长文本时
grid 布局下 gap 无法替代子项 padding 的误区
gap 控制的是网格项之间的空隙，但它不解决子项内部 padding 导致的内容挤压问题。
立即学习“前端免费学习笔记（深入）”；
- 如果卡片内有
padding: 20px，即使gap: 16px设得再准，文字仍可能被挤得换行或缩进 - 正确做法：把内边距从卡片自身移到父容器上，例如
.card-list { padding: 0 16px; }，卡片设width: 100%且无 padding - 或者改用
calc()扣减：width: calc(33.33% - 2rem)（适用于固定 padding 值） - 注意：
gap在旧版 Safari 中需加前缀，且仅对display: flex或display: grid的直接子元素生效
真正麻烦的不是怎么写宽度，而是哪一层该负责间距、哪一层该约束内容——一旦把 padding 放错位置，再调 width 也只是在补漏洞。
