fr与百分比本质不同：fr基于剩余空间等分，百分比基于父容器总宽；二者仅在minmax()中安全协同，混用需避免逻辑冲突，定位不可用百分比。
fr 单位不是百分比，但能和百分比共存
很多人看到 grid-template-columns: 1fr 2fr 就默认这是“按比例分配”，再配上 width: 50% 就以为能对齐——结果容器一缩放，列宽就错位。根本原因是：fr 是剩余可用空间的等分单位，而百分比是相对于父容器总宽（含 padding）计算的，两者基准不同。
实操建议：
-
fr适合定义「弹性占比」，比如侧边栏固定、主内容占满剩余空间：grid-template-columns: 200px 1fr - 百分比适合「严格比例约束」，比如响应式卡片栅格：
grid-template-columns: repeat(auto-fit, minmax(30%, 1fr))—— 注意这里30%控制最小宽度下限，1fr负责撑满剩余空间 - 混用时，避免在同一轨道定义中直接并列写
50% 1fr：浏览器会先按50%分配，再把剩下的算作1fr，逻辑混乱且不可预测
百分比在 grid-column-start / end 中不生效
你不能写 grid-column-start: 25% 或 grid-column: 1 / 50% —— CSS Grid 的行列定位只接受整数线号、命名线或跨距（如 span 2），百分比在这里是无效值，会被忽略或触发解析错误。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 元素没按预期位置显示，开发者检查 computed styles 发现
grid-column-start显示为auto - 控制台没报错，但布局完全失序，容易误判为 JS 干扰
替代方案：
- 用
grid-column+ 命名线配合grid-template-areas实现语义化定位 - 需要动态偏移？改用
justify-self或margin-left配合百分比（但注意这会影响网格项自身，不改变轨道划分） - 真要按可视区域比例定位？用
position: absolute+transform，别硬塞进 Grid 定位语法里
fr 和百分比在 minmax() 里协作的关键细节
minmax() 是二者真正能安全协同的唯一标准接口。但很多人漏掉一个关键点：当 minmax(20%, 1fr) 遇到窄屏时，20% 可能大于当前容器宽度，导致整个 track 被压缩甚至溢出。
使用场景：
- 响应式表单字段：希望输入框最小占 200px，窄屏下至少占 80%，宽屏下尽可能撑开 →
minmax(min(200px, 80%), 1fr) - 图片画廊：每列不少于 250px，最多均分剩余空间 →
minmax(250px, 1fr)
性能与兼容性影响：
-
minmax(20%, 1fr)在 Safari 15.4 之前有渲染抖动，建议降级为minmax(200px, 1fr)+ 媒体查询兜底 - 不要在
grid-template-rows中对fr使用百分比最小值（如minmax(30%, 1fr)），滚动时可能引发重排震荡
Grid 容器设了百分比 width 后，fr 计算变“虚”了
如果给 Grid 容器加了 width: 80%，又没给父容器设明确 width（比如 body 没设 max-width），那么 1fr 的“剩余空间”会基于这个浮动的 80% 计算，导致子项宽度随视口微小变化而跳变。
容易踩的坑：
- 在 flex 容器内嵌套 Grid，并给 Grid 设
width: 100%—— 此时100%是 flex 项的 content-box 宽度，但fr计算时还受box-sizing和 margin 影响 - 用
vw设容器宽（如width: 90vw），再配1fr，看似合理，实则放大了视口缩放误差
稳定做法：
- Grid 容器的宽度尽量由布局上下文决定（如 flex 自动伸缩、block 默认 100%），而非显式设百分比
- 必须限制宽度时，优先用
max-width+margin: 0 auto，让fr基于更稳定的可用空间计算 - 调试时打开浏览器 devtools 的 layout 面板，盯着
grid track sizes一栏看数值是否跳变，比肉眼观察更准
fr 和百分比不是非此即彼的选择，而是不同抽象层级的工具。真正难的是判断哪一层该由 Grid 划分，哪一层该交还给常规流或定位——这个边界，往往藏在设计稿的留白规则和交互反馈节奏里。
