1fr列宽不等并非fr失效，而是min-content抢占控制权：浏览器优先满足网格项的min-content宽度（如长url、nowrap文本），fr仅分配剩余空间；修复需同时使用minmax(0, 1fr)和子元素min-width: 0。
1fr列宽不等不是fr失效，是min-content在“抢控制权”
写grid-template-columns: 1fr 1fr 1fr后列宽不等，90%的情况不是代码写错，而是浏览器先满足每个网格项的min-content宽度——也就是内容能缩到的最窄尺寸（比如一个超长URL、一段white-space: nowrap文本、或未设max-width的图片）。fr只负责分配“剩余空间”，但若某列内容的min-content已经吃掉大部分宽度，其他列就只能分到残余空间。
检查子元素的min-width是否为auto
打开 DevTools → 选中任意一个网格项 → 看 Computed 面板里的min-width值。如果显示auto（而不是0或unset），这就是问题根源：
-
auto在文本类元素上 ≈ 其min-content宽度（如中文单字宽、英文单词全长） - 哪怕没写
white-space: nowrap，长URL或连续无空格字符串也会触发该行为 -
overflow: hidden加在容器上无效——内容根本没溢出，是轨道被min-content拉宽了
真正生效的修复组合只有两个动作
必须同时做，缺一不可：
- 把
1fr换成minmax(0, 1fr)：告诉轨道“允许压缩到 0”，解除min-content对轨道的锁定 - 给直接子元素（即
.grid > .item）加min-width: 0：解除项自身对min-content的默认守卫 - 如果子元素内部用了
display: flex或display: grid，它的直接子元素也得同步加min-width: 0，否则撑开会逐层传递
minmax(0, 1fr)和box-sizing、padding的关系
minmax(0, 1fr)只解决内容撑开问题，但视觉不均还常来自盒模型：
- 没设
box-sizing: border-box时，padding和border会额外增加宽度，导致1fr实际可分空间变小 - 同一行里有的项有
padding: 16px，有的只有padding: 8px，即使轨道等宽，内容区也不齐 -
gap是安全的，它不参与fr计算，但margin可能折叠或干扰布局，优先用gap
grid-template-columns，而在控制内容如何服从轨道——min-content看不见摸不着，却是最常被忽略的隐形约束。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
