fr是Grid布局中表示可用空间等分份额的单位，仅在grid-template-columns/rows中生效；它先扣除显式尺寸再分配剩余空间，需配合minmax()和repeat()实现响应式列数控制，且不兼容IE11。
fr单位到底是什么，和px/%有什么区别
fr 是 Grid 布局中“fractional unit”的缩写，代表**可用空间的等分份额**，不是固定像素，也不依赖父容器百分比。它只在 Grid 容器的 grid-template-columns 或 grid-template-rows 中生效。
常见误解是把它当“弹性比例”，但实际行为更接近“剩余空间分配器”：所有 fr 项先扣除显式尺寸（如 100px、auto、minmax(200px, 1fr) 占用的空间），再把剩下的空间按份数切分。
-
1fr 1fr→ 两列均分剩余空间（不是父宽50%，若存在200px固定列，它们分的是“父宽减200px”） -
2fr 1fr→ 第一列占剩余空间的2/3，第二列占1/3 -
1fr auto 1fr→ 中间列由内容撑开，左右列平分“父宽减中间列宽度”后的空间
如何用fr配合minmax实现真正响应式的列数控制
纯 1fr 1fr 1fr 在小屏上会挤成窄条，必须结合 minmax() 和 repeat() 才能自动增减列数。关键不是“设多少列”，而是“每列最小要多宽，最多能占几份”。
典型写法：grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))
立即学习“前端免费学习笔记（深入）”；
-
minmax(300px, 1fr)表示：每列至少300px，最多可伸展到占满一份剩余空间 -
auto-fit会让浏览器尽可能多地放入符合最小宽度的列，空列会被压缩消失；换成auto-fill则会保留空列位置（常用于占位） - 这个组合不需要媒体查询就能随容器宽度变化列数——300px是断点阈值，不是硬编码列数
fr在响应式中容易被忽略的兼容性与陷阱
IE11 完全不支持 fr，哪怕写了也会回退为 0px（导致布局崩溃）。现代项目若需兼容旧浏览器，必须提供降级方案。
- 用
@supports (display: grid)包裹 Grid 样式，外部用 Flex 或 float 做 fallback -
fr不能和calc()混合在同一个轨道定义里，比如1fr calc(100% - 200px)会失效，应改用minmax()或fit-content() - 嵌套 Grid 中，子容器的
fr基于其直接父容器的可用空间，不是最外层视口——这点常导致“为什么我的1fr没占满屏幕”的困惑
移动端优先时，fr配合max-width做内容区自适应
单纯靠 fr 控制列宽不够，文字、图片等内容本身需要约束最大宽度，否则在大屏上会拉得太开。Grid 只管布局结构，内容尺寸得另外控。
- 给 Grid 容器设
max-width: 1200px+margin: 0 auto，避免无限拉伸 - 内容项（如
<article></article>）加max-width: 100%和width: fit-content，防止图片溢出或文字过长折行异常 - 慎用
1fr 3fr这类固定比例——小屏下3fr列可能窄到无法阅读，建议改用minmax(250px, 1fr) minmax(500px, 3fr)
fr 单位本身不“响应”，它只是空间分配工具；真正的响应式来自你如何用 minmax 设定弹性边界，以及是否意识到内容尺寸和容器尺寸是两个独立控制维度。
