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，定义如下：
结果分析：
立即学习
“
前端免费学习笔记（深入）
”；
第一列宽 = 600px × 40% =
240px
剩余空间 = 600px - 240px =
360px
第二列（1fr）= 自动占据
360px
此时第二列比第一列宽，尽管它只有 1fr，因为 fr 是“剩余空间”的份额。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
多列混合场景
更复杂的例子：
仍以 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 是“分剩余空间”，就能正确预判混合布局的行为。
.grid-container {
display: grid;
grid-template-columns: 40% 1fr;
}
grid-template-columns: 30% 2fr 1fr;