fr单位与百分比混合使用时，百分比先按容器尺寸占位，fr再分配剩余空间。例如600px容器中设40%和1fr，则第一列240px，第二列360px；若设30%、2fr、1fr，则第一列180px，剩余420px按2:1分，得280px和140px。注意避免100%与fr共存，以防fr失效，推荐主内容用fr、侧边栏用固定或百分比宽度，确保响应式兼容。
在 CSS Grid 布局中，fr 单位和百分比（%）可以混合使用来定义行或列的尺寸，但它们的计算方式不同，理解其行为对布局控制至关重要。
fr 与 百分比的基本区别
fr（fraction）表示可用空间的一部分，而百分比是相对于容器总尺寸的比例。当两者混合时，Grid 容器会先分配固定值（如百分比、px 等），再将剩余空间按 fr 分配。
- 百分比%：基于容器宽度或高度，即使有剩余空间也不会拉伸
- fr 单位：自动填充剩余空间，具有弹性
- 混合使用时：百分比部分先“占位”，fr 部分再平分剩下的空间
实际示例：两列布局
假设容器宽 600px，定义如下：
.grid-container {
display: grid;
grid-template-columns: 40% 1fr;
}
结果分析：
立即学习“前端免费学习笔记（深入）”；
- 第一列宽 = 600px × 40% = 240px
- 剩余空间 = 600px - 240px = 360px
- 第二列（1fr）= 自动占据 360px
此时第二列比第一列宽，尽管它只有 1fr，因为 fr 是“剩余空间”的份额。
多列混合场景
更复杂的例子：
grid-template-columns: 30% 2fr 1fr;
仍以 600px 容器为例：
- 第一列 = 600 × 30% = 180px
- 剩余空间 = 600 - 180 = 420px
- 这 420px 按 2fr : 1fr = 2:1 分配
- 第二列 = (2/3) × 420 ≈ 280px
- 第三列 = (1/3) × 420 ≈ 140px
可见 fr 的比例是在减去非弹性部分后才生效。
注意事项与最佳实践
混合使用时需注意以下几点：
- 避免同时用 100% 和 fr 在同一方向，可能导致 fr 为 0
- 百分比之和超过 100% 时，fr 列可能被压缩甚至消失
- 响应式设计中，建议主内容区用 fr，侧边栏用固定宽度或百分比
- 测试不同屏幕尺寸下的表现，确保布局不会断裂
基本上就这些。只要记住：百分比是“按比例占满容器”，fr 是“分剩余空间”，就能正确预判混合布局的行为。
