fr 是 CSS Grid 的分数单位，表示剩余可用空间的一份，不同于固定像素（px）和相对父容器的百分比（%），仅在 grid-template-columns/rows 中生效，且受内容尺寸、minmax() 等限制影响。
fr 单位到底是什么，和百分比、px 有啥区别
fr 是 CSS Grid 中的“分数单位”，代表可用空间中的一份，不是固定像素，也不依赖父容器总宽高百分比。它只在 grid-template-columns 或 grid-template-rows 中生效，且仅对**剩余可用空间**做分配。
常见误解是把它当成“比例尺”直接等同于 1:2:1 —— 实际上，1fr 2fr 1fr 确实会按 1:2:1 分配剩余空间，但前提是这些轨道没被内容撑开或受 minmax() 等限制。一旦某列里放了个 width: 300px 的图片，而该列定义为 1fr，它就可能突破“1份”的预期，变成至少 300px 宽。
-
fr不参与初始尺寸计算，只在自动布局阶段介入；px和%是硬性尺寸约束 -
1fr≠100%：后者相对于网格容器，前者相对于扣除已确定尺寸后的剩余空间 - 混合使用时（如
200px 1fr 2fr），fr部分平分的是“总宽 − 200px”之后的空间
什么时候 fr 会失效或表现异常
最常遇到的“fr 没起作用”其实不是单位问题，而是布局上下文被干扰。典型场景包括：
- 父容器没设
display: grid，或没定义grid-template-columns/rows - 子元素设置了
width/min-width且值大于其所在fr轨道能分到的最小空间 - 用了
grid-auto-columns却忘了grid-template-columns只管显式网格，隐式网格默认用auto - 在
grid-template-rows中用fr，但容器高度未限定（如height: auto），导致无“可用空间”可分
例如下面这段代码，看着像三等分，实际第二列会被内容撑宽：
立即学习“前端免费学习笔记（深入）”；
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.item:nth-child(2) {
min-width: 400px; /* 这会让第二列至少 400px，破坏等分 */
}如何用 fr + minmax() 实现真正灵活又健壮的响应式网格
单靠 fr 很难兼顾“等分”和“不溢出”，必须配合 minmax() 控制下限与上限。这是现代 Grid 布局中最实用的组合。
-
minmax(200px, 1fr)：每列至少 200px，剩余空间再均分 —— 适合卡片列表 -
minmax(min-content, 1fr)：列宽随内容最小宽度自适应，但不超过均分所得 -
repeat(auto-fit, minmax(250px, 1fr)))：最常用响应式写法，浏览器会尽可能多塞下 250px 宽的列，空余由1fr均摊
注意：auto-fit 会折叠空轨道，auto-fill 则保留所有可能轨道（含空），影响换行行为。
fr 在嵌套 Grid 和 RTL 场景下的注意事项
嵌套 Grid 时，内层 fr 的“可用空间”是相对于其直接父网格项的尺寸，不是最外层容器。这意味着如果父项设置了 width: 300px，内层写 1fr 1fr 就是在 300px 内二等分，和外层是否用 fr 无关。
RTL（从右向左）布局下，fr 分配逻辑不变，但视觉顺序和 grid-column-start/end 数值方向需留意。比如 grid-column: 1 / -1 在 RTL 中仍表示从第一根线到最后一根线，但呈现是从右往左铺排。
真正容易被忽略的是：当用 fr 搭配 gap 时，gap 不计入 fr 计算 —— 它是在分配完所有轨道后额外插入的空白，所以 grid-template-columns: 1fr 1fr + gap: 20px，两列加起来宽度 = 容器宽 − 20px，再平分。
