css Grid行列比例fr与百分比混合使用

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 是“剩余空间”的份额。

Calliper 文档对比神器

文档内容对比神器

28

查看详情

多列混合场景

更复杂的例子：

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 是“分剩余空间”，就能正确预判混合布局的行为。

以上就是css Grid行列比例fr与百分比混合使用的详细内容，更多请关注php中文网其它相关文章！