fr单位是专为Grid设计的语义化剩余空间分配机制，先扣除固定尺寸和gap，再按比例分配剩余空间，天然规避百分比在嵌套、gap等场景的错位问题。
fr 单位不是“更强大”，而是专为 Grid 布局设计的语义化空间分配机制——它不依赖父容器总宽，只响应“剩余可用空间”，所以天然规避了百分比在嵌套、gap、边框等场景下的错位问题。
fr 单位怎么算，为什么 1fr ≠ 100% ÷ 列数
浏览器计算 grid-template-columns 时，先扣除所有固定占用（比如 200px 列、gap、子项 min-content 宽度），再把剩下的空间按 fr 比例分。例如 grid-template-columns: 200px 1fr 2fr：200px 先占位，剩下空间被切成三份，1fr 拿一份，2fr 拿两份。
而 25% 25% 25% 25% 是直接按父容器总宽（含 padding）切四块，一旦某列内容撑开或有 gap，其他列就被压缩，小屏下极易触发横向滚动条。
- fr 不受父容器
padding影响；百分比会把 padding 算进“100%”里 - fr 自动适配
gap；百分比列宽不会自动减去 gap 空间 - fr 与固定单位并存时逻辑清晰；混用
1fr 50%会导致浏览器先分 50%，再把剩下 50% 给 1fr，结果不可控
为什么 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) 比媒体查询写死列数更稳
硬写 @media (max-width: 768px) { grid-template-columns: 2fr 1fr } 本质是靠人猜断点，设备宽度微调几像素就可能卡在“差一列挤不进、多一列留白”的临界状态。
repeat(auto-fit, minmax(300px, 1fr)) 让浏览器自己决定能放几列：每列至少 300px，最多吃掉所有剩余空间，列数随容器宽度连续变化，没有卡顿感。
-
auto-fit会合并空轨道，适合响应式；auto-fill保留空位，适合固定格子数场景 - 别用
minmax(30%, 1fr)当最小值——窄屏下 30% 可能超容器宽，导致布局崩溃；优先用minmax(300px, 1fr)或minmax(min(300px, 80%), 1fr) - Safari 15.4 之前对
minmax(20%, 1fr)有渲染抖动，生产环境建议降级为像素 + 媒体查询兜底
fr 没生效？三个最常漏掉的硬性前提
fr 只在 Grid 上下文中起作用，写对地方比调参数更重要。
- 父容器必须声明
display: grid或display: inline-grid；仅子项设display: grid不行 - fr 是容器级声明，写在
grid-template-columns或grid-template-rows里；不能写在子项的width或grid-column上（后者只接受线号或span） - 子项若含长单词、URL 或未约束图片，会突破 fr 分配——加
min-width: 0或overflow: hidden才能让 1fr 真正“占满剩余”
IE11 和旧 Safari 怎么兼容 fr 单位
IE11 完全不支持 fr，连 display: -ms-grid 也只认 px 和 %；Safari 10–15.3 对 gap 和 minmax() 支持不稳定。
- 渐进增强是唯一靠谱路径：先写回退布局（如
grid-template-columns: 1fr 1fr+@supports not (grid-template-columns: 1fr)降级为 float 或 flex） - 避免在
grid-column-start里用百分比（语法无效），也不要用width: 50%对齐 fr 列——基准不同，必然错位 - 真要动态偏移定位，用
justify-self或margin-left，别试图把百分比塞进 Grid 轨道定义里
fr 的核心约束其实很朴素：它只管“剩余空间”，不管“你想要多大”。一旦内容固有宽度（min-content）超过 fr 分配结果，浏览器就只能拉伸轨道——这时候该干预的不是 fr 值，而是子项的 min-width 或文本折行行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
