1fr 分配需父容器有明确宽度，否则因 min-width: auto 和 minmax(auto, 1fr) 双重限制导致列宽异常；应设 minmax(0, 1fr) 并给子项加 min-width: 0。
父容器没宽度，1fr 就没空间可分
1fr 不是“自动占一半”，而是把父容器当前的 width 或 height 扣除固定尺寸后，按份数切。如果父容器是默认 width: auto 的块级元素，又没设 width: 100%、flex: 1 或 max-width，那它的实际宽度可能只有内容那么宽——两列 1fr 1fr 就挤在几像素里，甚至在 DevTools 里看到列宽为 0px。
检查方法：
- 打开 DevTools → 选中 Grid 容器 → 看 Computed 面板里的
width值是不是auto或远小于预期 - 临时加
outline: 2px solid red，看容器真实渲染边界有多窄 - 如果是 Flex 子项，必须加
flex: 1或min-width: 0（防min-width: auto锁死收缩）
子项默认 min-width: auto 在抢宽度
即使容器宽度正常，列宽也可能严重不均——这不是 1fr 失效，而是每个网格项默认 min-width: auto，等价于其 min-content 宽度（比如一个长 URL、连续无空格字符串、或未设 max-width 的图片）。浏览器会先满足这个最小宽度，1fr 只分剩下的空间。
验证方式：
- 选中任意一个网格项 → Computed 面板里查
min-width，若显示auto而非0或unset，就是它 - 给直接子元素加
min-width: 0（注意选择器精准，如.grid > .item） - 若子项内部用了
display: flex或display: grid，它的直接子元素也得同步加min-width: 0，否则撑开会逐层传递
轨道定义没放开压缩下限：该用 minmax(0, 1fr)
1fr 实际等价于 minmax(auto, 1fr)，而 auto 就是那个守着 min-content 不放的默认值。要真正让列宽严格按比例走，必须显式打破这层限制：
- 把
grid-template-columns: 1fr 1fr改成grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) - 或者用
repeat(2, minmax(0, 1fr))更简洁 - 这个写法告诉轨道：“允许压缩到 0”，
1fr才能真正拿到等份的可用空间 - Safari 14.1+ 支持稳定，旧版 Safari 可能退化，需权衡
盒模型和 gap 悄悄吃掉了可分空间
1fr 分的是“扣除所有固定开销后的剩余空间”。gap、border、padding 全都算在内——它们不参与分配，但会提前扣掉。
- 比如
grid-template-columns: 1fr 1fr+gap: 10px，容器总宽 800px，实际可分空间只有800px − 10px = 790px，每列得约 395px - 没加
box-sizing: border-box时，padding: 16px会让内容区被进一步压缩，视觉上更不齐 - 别在子项上写
width: 100%或min-width: 200px，这些都会干扰 fr 的自然分配
真正卡住的点往往不是某一行代码写错，而是 min-width: auto 和 minmax(auto, 1fr) 这两个默认行为叠在一起，把内容撑开的路径全留着。修的时候必须同时动轨道定义（minmax(0, 1fr)）和子项样式（min-width: 0），缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
