百分比列宽计算不准的根本原因是其基准为“可用空间”而非父容器宽度，受gap、box-sizing、外层flex及子项min-content共同干扰。
百分比列宽在 Grid 中计算不准，根本原因不是百分比本身错了，而是它被用在了不该用的地方——grid-template-columns 里的百分比不按“父容器宽度”直接等分，而是受 gap、box-sizing、外层 display: flex 干扰，甚至被子项内容反向撑开。
百分比在 grid-template-columns 中的基准是“可用空间”，不是父容器 width
写 grid-template-columns: 25% 75% 看似简单，但浏览器实际是：先从父容器宽度里扣掉所有 gap、border、padding（如果没设 box-sizing: border-box，这些还会额外加宽），再把剩下的“可用空间”按百分比切。一旦父容器有 padding: 16px 且仍是 content-box，那 100% 就已经超了。
- 用开发者工具看
Computed → width，确认父容器真实渲染宽度是否等于你预期的“100%” - 检查
gap值：比如gap: 20px+ 两列 → 扣掉 20px，25% 是基于剩余宽度算的，不是原始父宽 - 避免嵌套干扰：如果 Grid 容器的父元素是
display: flex且没设flex: 1或width: 100%，那它的“可用空间”可能只有 300px，25% 就只剩 75px
子项内容会反向破坏百分比分配
百分比列宽没有收缩下限，默认按 min-content 保护——长单词、未约束图片、white-space: nowrap 的文本，都会把整列撑宽，导致其他列被压缩甚至换行，视觉上就是“25% 不准了”。
- 必须给所有 Grid 子项加
min-width: 0，解除min-content锁定 - 图片/视频补
max-width: 100%; height: auto; - 文字容器加
overflow-wrap: break-word或text-overflow: ellipsis - 别在子项上写
width: 100%，它会强制占满轨道，无视 gap 预留
混用百分比和 fr 会彻底打乱计算逻辑
grid-template-columns: 25% 1fr 1fr 这种写法常见但危险：25% 列先占位，剩下空间才由两个 1fr 平分——结果第二、三列各得的是 “(100% − 25%) / 2 = 37.5%”，不是你直觉中的“均分剩余”。更糟的是，如果 25% 列里内容撑到 300px，而父容器只有 600px，那两个 1fr 就只剩 300px 可分，每列 150px，远低于 37.5%。
- 真要固定比例侧边栏，用
calc()：例如grid-template-columns: 25% calc((100% - 25%) / 2) calc((100% - 25%) / 2) - 全弹性场景直接用
1fr 2fr 1fr，fr天然按剩余空间分配，不依赖父宽绝对值 - Sass 中避免
percentage(1/3)输出 33.333333%，改用calc()在运行时算，无编译期舍入
浏览器 sub-pixel 渲染会让百分比看起来“错位”
父容器宽度是小数像素（如 423.7px）时，33.33% × 423.7 ≈ 141.2px，浏览器四舍五入成 141px；三列加起来就是 423px，少 0.7px —— 肉眼可见间隙或对不齐。这不是 bug，是渲染限制。
- 用
calc((100% - 2px) / 3)替代33.33%，误差只发生在最后一步除法，不叠加 - 确保全局
*, *::before, *::after { box-sizing: border-box; }，否则 padding/border 会进一步放大 sub-pixel 偏差 - 现代项目优先用
1fr，fr单位由布局引擎直接调度，不经过百分比→像素转换链
真正难的不是让某个百分比值“看起来准”，而是确认 grid-template-columns 的每一列，是否共享同一套可用空间来源——它被 gap 扣过吗？被外层 flex 截断了吗？子项有没有偷偷撑开它？这些细节不查清楚，调再多小数位也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
