fr按剩余空间份数分配而非容器总宽均分，需扣除gap、固定宽、内容固有宽及min-width:auto等干扰项，父容器无明确尺寸时fr无效，响应式应优先用auto-fit与minmax组合。
因为 fr 不是“按比例均分容器总宽”，而是“扣除所有固定占用后，对剩余空间按份数切分”——只要存在任何干扰项（内容固有宽、gap、min-width: auto、父容器无明确尺寸），分配结果就必然偏离直觉。
fr 分配前先扣掉这些“隐形占位者”
浏览器计算 1fr 1fr 时，并不会直接拿容器宽度除以 2。它严格按三步走：先算出容器总宽 → 扣掉所有非弹性部分 → 把剩下的空间按份数分。被扣掉的部分包括：
-
gap值（比如gap: 1rem会从总宽中减去两倍该值） - 显式设宽的列（如
200px或25%） - 子项内容的固有最小宽度（比如未换行的长 URL、图片原始宽、
min-content） - 网格轨道自身的
min-width下限（默认是min-content，不是0）
例如容器宽 600px，设了 gap: 20px，实际参与 fr 分配的只剩 560px；若其中一列里有个 width: 400px 的按钮，那它会先占满 400px，剩下 160px 再分给其他列——此时 1fr 1fr 已毫无意义。
子项默认 min-width: auto 是最大干扰源
即使父容器宽度正常、gap 为 0，你仍可能看到列宽严重不均。打开 DevTools 的 Computed 面板，检查任意一个网格子项的 min-width，大概率显示 auto。这意味着浏览器强制该列不能窄于其内容的最小可显示宽度（min-content），哪怕你写了 1fr。
- 解决方法一：给直接子元素加
min-width: 0（注意选择器精度，如.grid > .item） - 解决方法二：改用轨道级控制 ——
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) - 配合
overflow: hidden或text-overflow: ellipsis，否则放开限制后内容仍会溢出
父容器没尺寸，fr 就没空间可分
fr 不会凭空创造空间，它只分割父容器当前已确定的可用宽度。如果父容器是普通块级元素且未设 width、max-width 或 flex: 1，它的宽度就是内容撑出来的（width: auto）。此时 1fr 能分的“剩余空间”可能只有几像素，甚至为 0。
- 快速验证：给父容器加
outline: 2px solid red，看它真实渲染边界是否符合预期 - 若父容器在 Flex 布局中，必须加
flex: 1或width: 100%，否则min-width: auto会锁死收缩 - 嵌套 Grid 中，子 Grid 的
1fr只基于其**直接父项的宽度**计算，外层比例不会传导
响应式场景下硬写 1fr 1fr 1fr 是自找麻烦
在手机屏上，1fr 1fr 1fr 会把容器宽度机械三等分，不管内容是否可读。280px 屏幕下每列仅约 93px，图片挤压、文字频繁折行、点击目标过小——这不是 bug，是 fr 按规范执行的结果。
- 正确做法是用
repeat(auto-fit, minmax(300px, 1fr))，让浏览器决定列数 -
minmax(300px, 1fr)表示“每列至少 300px，最多拿它应得的那份剩余空间” -
auto-fit会合并空轨道，确保剩余空间由实际存在的列均分；auto-fill则保留空位，容易误判
真正难的不是写对 fr，而是意识到它从不“理解”内容——它只做算术，而人要负责把内容约束、父容器上下文、轨道最小边界全都交代清楚。漏掉任意一环，fr 就会按最字面的意思执行，然后给你一个“没错但不对”的结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
