fr单位本身无精度舍入问题，其“不准”源于与百分比混用、sass中percentage()函数输出误差、父容器非整数像素导致的sub-pixel累积误差；唯一需用百分比的场景是固定比例列（如25%侧边栏）配合calc()实现runtime精确计算。
fr 单位本身没有精度舍入问题——问题出在你把它和百分比混用、或强行转成百分比输出的时候。
为什么 fr 本身不会舍入，但你看到的宽度却“不准”
fr 是 Grid 布局引擎在运行时直接参与空间分配的单位，不经过 CSS 解析器的字符串→数值→像素转换链。它不依赖小数位数，也不受 percentage() 函数输出精度影响。你看到的“不准”，往往来自以下场景：
- 把
1fr 1fr手动替换成50% 50%，然后发现两列加起来是 99.999% 或 100.001% - 在 Sass 中用
percentage(1/3)输出33.3333333333%，再拼进grid-template-columns，结果三列总和 ≠ 100% - 父容器宽度不是整数像素（比如由
fit-content推导出 423.7px），导致百分比计算天然带 sub-pixel 累积误差
什么时候真该用百分比辅助 fr
只有一种情况值得引入百分比：你需要某列严格按容器宽度比例锁定（如侧边栏始终占 25%），而其余列弹性响应。此时不能全用 fr，但也不能裸写百分比——得靠 calc() 把控制权交还给浏览器 runtime 计算：
- 错误写法：
grid-template-columns: 25% 1fr 1fr;→ 第二、三列各拿“剩余空间”的一半，不是容器的 37.5% - 正确写法：
grid-template-columns: 25% calc((100% - 25%) / 2) calc((100% - 25%) / 2);→ 浏览器实时算，无编译期舍入 - 更稳写法（推荐）：
grid-template-columns: 25% 1fr 1fr;+ 给容器加width: max-content;或确保其宽度为整数像素，让 fr 分配基数可预测
用 Sass 生成 calc 表达式，绕过 percentage() 的陷阱
Sass 的 percentage() 只是字符串拼接，对精度毫无帮助。真正有效的是让 Sass 输出数学表达式，由浏览器执行：
- 别写：
width: percentage($a / $total); - 改写：
width: calc(#{$a} / #{$total} * 100%);（Sass 3.4+ 支持） - 旧版 Sass 需：
width: unquote("calc(#{$a} / #{$total} * 100%)"); - 关键约束：
$a和$total必须是整数，或已用round($val, 5)控制过精度，避免0.1 + 0.2类浮点误差
真正难的不是算单个值，而是统一计算源头
如果你的栅格列宽、内边距、边框、gap 全部从同一个 $grid-unit 推导，那哪怕每个值都带小数，整体仍能对齐。一旦列宽用 percentage()、gap 用 px、padding 用 rem，再精确的单个百分比也没用——误差会在线条、阴影、border-collapse 等环节暴露。fr 能屏蔽部分干扰，但前提是别人为把它拖进百分比体系里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
