fr单位先扣除固定占用（如px、gap、min-content）再按比例分配剩余空间，故1fr≠100%÷列数；百分比则直接按含padding的总宽均分，且不自动规避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在grid-template-rows里失效的三个常见原因
1fr 在 grid-template-rows 里表现异常，90% 的情况不是 fr 写错了，而是网格容器本身没有可参照的高度。
- 父容器设了
height: 300px，子网格必须显式设height: 100%或height: 300px，否则1fr无从计算 -
height: 100vh或height: 100%生效的前提是所有祖先元素（包括html、body）都有明确高度，否则链路断掉，100%变成auto - 用
align-items: stretch（默认值）不能替代高度约束——它只拉伸内容盒，不创造可用空间
混用fr和%时为什么顺序很重要
浏览器按声明顺序逐个解析轨道尺寸：% 列先按容器总宽算出绝对值，剩下的空间才交给 fr 分配。fr 不会回退去压缩前面的 % 列。
例如 grid-template-columns: 50% 1fr 1fr：第一列占 50%（如 500px），剩下 500px 由两个 1fr 平分，各 250px；而 grid-template-columns: 1fr 1fr 50% 会让前两列平分“总宽 − 50%”，结果完全不同。
真正要让主内容区弹性占满，优先用 1fr 放最后或单独一列，避免和 % 混排。
fr 是 Grid 布局上下文里的空间分配机制，不是通用缩放单位。写错位置、没设 display: grid、或被嵌套内容撑破边界，都会让它看起来“失效”。这些细节比单位本身更常决定成败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
