fr是CSS Grid中用于分配剩余空间的弹性单位，表示份数比例，常用于grid-template-columns或grid-template-rows；例如1fr 2fr 1fr将容器按1:2:1划分，第二列宽度为其他两列的两倍；可与px等固定单位混合使用，此时fr分配扣除固定宽度后的剩余空间；典型应用包括侧边栏固定主内容自适应、等分布局如repeat(3,1fr)，以及配合minmax实现响应式网格；fr仅在Grid布局中有效，且只作用于剩余空间。
在CSS中，并没有一个叫做 fraction 的独立属性或单位，但你可能是指 fr 单位，它是“fraction”的缩写，中文意思是“份数”。fr 是 CSS Grid 布局中用于分配可用空间的一个弹性单位。
fr 单位的基本作用
fr 用来表示网格容器中剩余空间的分配比例。它只在 grid-template-columns 或 grid-template-rows 中使用，适用于 CSS Grid 布局。
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
这表示将容器分为三列：第一列占 1 份，第二列占 2 份，第三列占 1 份，总共 4 份。因此第二列的宽度是其他两列的两倍。
fr 与其他单位混合使用
你可以将 fr 和固定单位（如 px、rem）一起使用。此时，fr 分配的是去除固定尺寸部分后的剩余空间。
立即学习“前端免费学习笔记（深入）”；
例如：
.container {
display: grid;
grid-template-columns: 100px 1fr 2fr;
}
第一列固定为 100px，剩下的宽度被分为 3 份：第二列占 1 份，第三列占 2 份。
常见使用场景
- 创建自适应布局，比如侧边栏固定宽度，主内容区自动填充剩余空间。
- 等分布局，如卡片式布局：
grid-template-columns: repeat(3, 1fr)创建三等分列。 -
响应式设计中配合
minmax()使用，例如：grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))，让每列最小 200px，多余空间平均分配。
基本上就这些。fr 单位让网格布局的空间分配变得非常灵活和直观。不复杂但容易忽略的是：它只作用于剩余空间，且不能用于非 Grid 布局中。
