fr单位按剩余空间比例分配，先扣除固定宽和minmax最小值，再依比例划分；需防内容溢出、嵌套失效及IE兼容问题。
fr单位到底怎么算宽度
fr不是像素，也不是百分比，它是在剩余空间里按比例分蛋糕。容器总宽减去所有固定宽（比如 100px、2em、minmax(200px, 1fr) 中的最小值部分）之后，剩下的才交给 fr 算。
常见错误现象：grid-template-columns: 1fr 2fr 100px 以为第三列是“固定100px”，前两列按1:2分剩余，结果发现第三列被撑大了——其实是没留够100px空间，浏览器强制压缩前面的 fr 列来保底。
- fr 只参与分配「可用剩余空间」，不参与初始布局约束
- 如果某列设了
minmax(300px, 1fr)，那它至少要300px，超出部分才可能和别人分剩余空间 - 混合使用时，先满足所有
minmax()的最小值、固定宽、内容固有宽，再把剩下空间按 fr 比例切
用fit-content()或minmax()配合fr防溢出
纯 fr 在内容超长时容易撑破容器，尤其文字、图片没做限制。这时候不能只靠 fr，得加一层弹性兜底。
使用场景：卡片列表、响应式仪表盘、表格式布局中列宽需自适应但又不能无限拉伸。
-
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))))是最常用的安全写法，比单纯1fr 1fr 1fr更健壮 -
fit-content(300px)表示“最多占300px，内容少就缩，多就截断或换行”，适合标题栏、按钮组 - 注意
auto-fit和auto-fill区别：前者会合并空轨道，后者保留空轨道，影响 flex-like 行为
fr在嵌套Grid里容易失效的三个原因
外层 Grid 的 fr 列宽，不会自动传导给内层 Grid；内层自己得重新定义空间分配逻辑。
常见错误现象：父容器设了 grid-template-columns: 1fr 2fr，子元素也用 Grid，但子 Grid 的 1fr 宽度远小于预期，甚至塌缩。
- 子 Grid 默认
width: auto，受父项内容尺寸限制，不是继承父 fr 比例 - 如果父项没设
width: 100%或min-width: 0，内部文本流会撑开父项，破坏 fr 计算基础 - 嵌套时建议显式控制：父项加
min-width: 0防文字溢出，子 Grid 设width: 100%再定义自己的grid-template-columns
IE不支持fr？别硬扛，用@supports做降级
IE10/11 完全不认识 fr，直接当无效声明忽略，整行 grid-template-columns 失效，回退到单列。
性能影响小，但兼容性风险集中——不是“部分不生效”，而是整个网格定义崩掉。
- 必须用
@supports (display: grid) and (grid-template-columns: 1fr)包裹 fr 布局代码 - 降级方案别用 float 或 inline-block，推荐
display: flex+flex: 1，语义和行为更接近 - 路径上避免混用
fr和 IE 支持的repeat(auto-fit, ...)，后者在 IE 里也无效
fr 的灵活背后是严格的计算前提：剩余空间得真实存在，且所有参与计算的项都得“守规矩”。一列设了 white-space: nowrap，另一列用了 1fr，那这个 fr 就永远分不到空间——它等的“剩余”，早被那个不换行的字串吃光了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
