fr单位用于按比例分配容器剩余空间，适合创建响应式网格布局。例如1fr 2fr将容器分为三份，第一列占1/3，第二列占2/3；可与px等单位混合使用，如100px 1fr 2fr，其中fr分配除去100px后的剩余空间；常结合repeat(auto-fit, minmax(150px, 1fr))实现弹性响应式设计；需注意内容溢出可能破坏布局，应设置min-width: 0避免默认最小尺寸限制fr生效。
在CSS Grid布局中，fr单位是“fraction”的缩写，意思是“份数”或“比例份额”。它用来分配容器中剩余可用空间，特别适合创建灵活、响应式的网格布局。理解fr单位如何影响行和列的尺寸，是掌握Grid布局的关键。
fr单位的基本用法
当你在grid-template-columns或grid-template-rows中使用fr单位时，浏览器会将容器的可用空间按比例划分。
例如：
.grid {display: grid;
grid-template-columns: 1fr 2fr;
}
这表示容器被分为两列：第一列占1份，第二列占2份，总共3份。因此第一列占容器宽度的1/3，第二列占2/3。
立即学习“前端免费学习笔记（深入）”；
混合使用fr与其他单位
fr单位可以和其他单位（如px、%、auto等）一起使用，此时fr只分配剩余空间。
比如：
.grid {grid-template-columns: 100px 1fr 2fr;
}
第一列固定为100px，剩下的水平空间被分为3份：第二列得1份，第三列得2份。这样能实现一侧固定、其余部分弹性分布的效果。
fr与minmax、repeat的结合
实际开发中，常配合repeat()和minmax()函数使用fr，增强灵活性。
例如创建一个自动换行、每项至少150px宽的响应式网格：
.grid {display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
这里每一列最小150px，如果容器空间足够，它们会平均分配剩余空间（每个1fr）。屏幕变窄时自动换行，保持良好布局。
注意fr不适用于内容溢出的情况
fr分配的是可用空间，如果某列内容本身很宽（比如长单词或固定尺寸元素），可能撑破网格。这时需要设置min-width: 0或overflow处理。
例如：
.grid-item {min-width: 0;
}
避免因默认最小尺寸导致fr失效。
基本上就这些。fr单位让Grid布局变得非常直观和强大，关键是理解它分配的是剩余空间，并且可以灵活组合其他单位和函数。用好fr，能大大减少媒体查询，提升页面适应性。
