fr 是 css grid 中专用于分配剩余可用空间的弹性单位，先扣除固定尺寸和 gap，再按比例分割剩余空间；它不是像素、百分比或 em，不表示绝对长度，也不依赖父容器尺寸的百分比计算。
fr 是什么，不是什么
fr 不是像素、百分比或 em，它不表示绝对长度，也不依赖父容器尺寸的百分比计算；它是 CSS Grid 中专用于**分配剩余可用空间**的弹性单位。当所有 grid-template-columns 或 grid-template-rows 用 fr 定义时，浏览器先扣除固定尺寸（如 100px、auto、minmax(200px, 1fr) 中的最小值部分），再把剩下的空间按 fr 数值比例切分。
常见错误现象：1fr 1fr 在有 gap 的容器里没占满整行——因为 gap 占用的空间被从“剩余空间”中扣除了，fr 只分剩下的部分。
使用场景：响应式侧边栏+主内容区、卡片网格等需要动态均分或按比例伸缩的布局。
fr 和 auto / minmax 混用时怎么算
混合使用时，fr 的计算顺序很关键：浏览器会先满足所有非 fr 轨道的最小约束（比如 auto 至少要容纳内容高度，minmax(150px, 2fr) 的 150px 是硬性下限），再把剩余空间交给 fr 分配。
立即学习“前端免费学习笔记（深入）”；
参数差异明显：
-
1fr 2fr→ 剩余空间按 1:2 切 -
minmax(200px, 1fr) 1fr→ 先确保第一列至少 200px，再把「总宽 − 200px − gap」按 1:1 分给两列 -
auto 1fr→ 第一列宽度由内容决定，第二列填满剩余所有空间（含 gap 后的空隙）
性能影响极小，但过度嵌套 minmax() + fr（如 minmax(auto, 1fr) minmax(auto, 2fr)）可能触发多次布局重排，尤其在内容动态变化时。
fr 在不同浏览器里的兼容表现
所有现代浏览器（Chrome 57+、Firefox 52+、Safari 10.1+、Edge 16+）都支持 fr，但 Safari 早期版本（≤10）对 fr 在 grid-template-areas 中的解析有偏差，比如 "a a b" / 1fr 1fr 可能错乱。
兼容性建议：
- 避免在
grid-template-areas中混用fr和命名轨道名做复杂映射 - 如果需支持 Safari 9 或 iOS 9，改用
%或flex替代 -
fr不能出现在calc()内，例如calc(1fr + 10px)是无效语法，会直接被忽略
为什么 1fr 有时看起来“没弹性”
表面看 1fr 没缩放，往往是因为它被其他约束锁死了：比如父容器 width 固定、子元素设置了 min-width、或者同行/同列存在 max-content 的内容（如长单词、未折行 URL）导致整条轨道被撑开，fr 失去可分配空间。
排查步骤：
- 检查是否有未设置
word-break: break-word或overflow-wrap: break-word的文本 - 确认父容器没有
min-width或width硬编码成过小值 - 用 DevTools 查看实际渲染的轨道尺寸，对比
grid-template-columns声明值和 computed 值是否一致
真正难处理的是 fr 遇上 fit-content() 或隐式网格线自动扩展的情况——这时候 fr 的“剩余空间”可能比你预想的少很多，甚至为零。
