fr单位用于按比例分配网格容器的剩余空间，1fr代表一份，2fr为两份；它不作用于已设固定宽度的部分。例如grid-template-columns: 200px 1fr 2fr时，后两列在减去200px后按1:2分剩余空间。fr可与px、%、auto混用，如250px 1fr实现侧边栏+自适应主区，或结合minmax(200px, 1fr)限制最小宽度。注意：全固定列无剩余空间则fr无效；容器过窄可能溢出，需用min-width控制；嵌套时fr基于父项空间计算。通过实践不同组合可掌握其弹性布局特性。
在CSS Grid布局中，_fr单位（fractional unit）是实现子元素按比例分配可用空间的核心工具。它允许你以灵活、直观的方式控制网格轨道的大小，特别适合响应式设计。
理解_fr单位的基本含义
fr代表“fraction”，即“份数”。它表示网格容器中剩余可用空间的等分比例。比如，1fr就是可用空间的1份，2fr就是2份，以此类推。
注意：_fr分配的是剩余空间，如果某些列设置了固定宽度（如px、em），那么_fr只作用于减去这些固定值后的空间。
常见用法示例：-
grid-template-columns: 1fr 2fr;—— 第二列宽度是第一列的两倍 -
grid-template-columns: 1fr 1fr 1fr;—— 三列等宽 -
grid-template-columns: 200px 1fr 2fr;—— 第一列固定200px，剩余空间按1:2分配给后两列
结合其他单位使用_fr实现复杂布局
_fr单位可以和px、%、auto等混合使用，构建更灵活的布局结构。
立即学习“前端免费学习笔记（深入）”；
实用场景举例：
-
grid-template-columns: 250px 1fr;—— 左侧侧边栏固定宽度，右侧主内容区自动撑满剩余空间 -
grid-template-columns: 1fr auto 2fr;—— 中间列根据内容自适应，左右列按比例分配剩余空间 -
minmax(200px, 1fr)—— 列最小200px，最大可伸展至1份空间，防止过小或过大
避免常见误区
使用_fr时需注意一些容易出错的情况：
- 当所有列都是固定宽度时，_fr不会生效，因为没有剩余空间可分配
- 容器宽度不足时，_fr仍会尝试按比例分配，可能导致内容溢出，建议配合min-width控制
- 嵌套Grid中，_fr基于父网格项的空间计算，层级关系影响最终尺寸
实际练习建议
掌握_fr最好的方式是动手实践：
- 创建一个容器，设置
display: grid和gap - 尝试不同比例组合，如
1fr 1fr、1fr 2fr 1fr - 加入固定宽度列，观察剩余空间如何被分配
- 使用
minmax()限制弹性范围，提升布局稳定性
基本上就这些。_fr单位让Grid布局变得极其高效，关键是理解它分配的是“剩余空间”而非总空间。多练几次，就能自然掌握比例控制的节奏。
