1fr列被长文本撑开并非1fr失效，而是grid子项默认min-width: auto导致列宽至少等于内容最小宽度；加white-space: nowrap后内容不可压缩，列被迫拉宽，此时设min-width: 0或使用minmax(0, 1fr)可修复。
为什么1fr列被长文本撑开
根本不是1fr失效，而是Grid子项默认min-width: auto——它会强制让列宽至少等于内容的最小宽度（min-content）。当你加了white-space: nowrap，一串不换行的URL或长单词就直接变成“不可压缩”的硬尺寸，浏览器只能把整列拉宽，其他列被迫收缩。
此时开发者工具里看到grid-template-columns: 1fr 1fr明明写着，但Computed面板里两列宽度却严重不等，就是这个原因。
- 检查子元素是否含
white-space: nowrap、min-width或未设overflow - 别只看Styles面板——打开Computed，确认
min-width实际值是不是auto - 临时加
border: 1px solid red和min-width: 0对比，能立刻验证是否是此问题
给子项加min-width: 0就能修好
一行代码解决：在Grid子项上显式设置min-width: 0，告诉浏览器“允许我压缩到0”，1fr才真正按比例分配可用空间。
注意这不是hack，而是CSS规范中明确允许的行为——min-width: 0覆盖auto的默认约束，释放fr的弹性能力。
- 写法必须是
.grid > .item { min-width: 0; }，不能只写.item（避免影响非Grid上下文） - 搭配
overflow: hidden; text-overflow: ellipsis;才能让文本真正截断 - 如果子项里还有嵌套Flex/Grid，它们内部也需同样处理，否则撑开会逐层传递
用minmax(0, 1fr)替代纯1fr更稳妥
在grid-template-columns里直接改轨道定义，比依赖子项样式更底层、更可靠。写minmax(0, 1fr)相当于“这列宽度可以缩到0，上限是1份剩余空间”，从源头掐断内容撑开的可能性。
尤其适合动态内容场景：比如卡片列表中某张卡突然多了个超长标签，纯1fr可能瞬间失衡，而minmax(0, 1fr)能稳住整体比例。
- 三列等分应写
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); - 不要混用
minmax(0, 1fr)和auto，否则auto列仍会抢走最小宽度 - 搭配
gap使用时，确保父容器有足够宽度；否则minmax(0, 1fr)可能压缩过度导致内容挤成一团
移动端横屏下1fr列数变少？别怪fr，查minmax最小值
横屏时repeat(auto-fit, minmax(120px, 1fr))列数反而减少，不是1fr出错，而是120px这个固定最小值卡死了列宽下限——浏览器算出“塞不下5列，因为每列不能小于120px”，于是退化成3列+大片留白。
这时加min-width: 0没用，问题在轨道定义本身。得让最小值能随视口变化。
- 首选
clamp(80px, 15vw, 120px)代替固定120px，一行代码适配竖/横屏 - 次选媒体查询：
@media (orientation: landscape) { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr))); } - 别用
vw单独做最小值（如10vw），小屏下可能崩坏；clamp()的三参数机制才是安全边界
真正容易被忽略的是：min-width: 0 必须作用在Grid子项上，而不是子项里的文字或图片——层级错一级，整个修复就失效。而且它只解决“内容撑开”这一类1fr失效，如果是父容器没高度、嵌套Flex没设交叉轴尺寸，那得另起炉灶。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
