fr是剩余空间的份数，先扣除固定尺寸再按比例分配；与固定单位并存时后者优先占位；需配合minmax()、媒体查询等实现响应式和兼容性。
fr单位到底怎么算，为什么盒子不按比例分？
fr不是像素也不是百分比，它代表“剩余空间的份数”。如果你写 grid-template-columns: 1fr 2fr，浏览器先扣掉所有固定尺寸（比如 gap、带单位的列宽、内容撑开的最小宽度），再把剩下的空间按 1:2 切分。
- 有内容溢出或
min-width太大时，fr 会失效——它只分配“可用剩余空间”，不是“你期望的空间” -
1fr和100px并存时，100px 先占位，fr 再分剩下的；但1fr和minmax(200px, 1fr)并存，就可能让前者被拉宽到 200px 以上 - 别在
grid-template-rows里对auto行用 fr——auto行高由内容决定，fr 无从分配
移动端适配时，fr + media query 怎么配合才不翻车？
单纯靠 fr 无法响应式，它只管比例分配，不管断点。真正起作用的是媒体查询切换 grid-template-columns 的定义。
- 常见错误：只改
gap或只加max-width，但列数没变，小屏照样挤成一团 - 推荐模式：
@media (max-width: 768px) { .grid { grid-template-columns: 1fr; } }，大屏用repeat(3, 1fr)，小屏强制单列 - 避免嵌套多层 media query 定义不同 fr 组合——维护成本高，且容易因优先级冲突导致列数意外回退
-
minmax()可以辅助：比如grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))，比纯 fr 更适合卡片流布局
IE 不支持 fr，但项目又必须兼容，怎么办？
IE10/11 完全不识别 fr 单位，遇到就整个 display: grid 声明失效（回退到普通块级流）。
- 不能靠 Autoprefixer 补前缀——fr 是语法级不支持，加
-ms-没用 - 安全做法是用
@supports (display: grid) and (grid-template-columns: 1fr)包裹现代布局，IE 自动跳过 - 如果必须支持 IE，得准备降级方案：Flexbox 实现类似网格（注意
flex-wrap和对齐逻辑差异），或用 CSS Tables（语义差但稳定） - 别用 JavaScript 动态计算 fr——既慢又难同步滚动、resize 等行为，实际项目中基本不可控
grid-gap 和 gap 在 fr 布局里有什么坑？
gap 是标准属性，grid-gap 是旧别名，现代浏览器都支持，但它们影响 fr 分配的逻辑是一致的：gap 值会被从总空间里预先扣除，再交给 fr 去分。
- 写
gap: 1rem后，三列1fr 1fr 1fr实际分的是 “容器宽 − 2×1rem” 的空间（两处间隙） - 如果同时设了
row-gap和column-gap，且值不同，fr 依然只按列方向剩余空间分配——行方向 gap 不影响列 fr 计算 - 在
grid-auto-rows: 1fr场景下，row-gap会导致自动行高度异常（尤其配合grid-template-rows显式定义时），建议自动行统一用minmax(100px, auto)替代
minmax()、fit-content() 或媒体查询来补足。最常被忽略的是：fr 从不主动压缩内容，它只负责分空间；内容撑爆了，网格就溢出。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
