1fr列不等宽的根本原因是min-content约束而非fr失效；需同时设置grid-template-columns: minmax(0,1fr)和子项min-width:0才能实现真正等比分配。
fr单位没失效，是它被min-content“劫持”了计算权——1fr列宽 ≠ 内容宽度 ÷ 列数，而是内容最小宽度和剩余空间之间的博弈结果。
为什么加了white-space: nowrap后1fr突然不等宽
根本不是1fr出错，而是子项默认min-width: auto，而auto在nowrap下等于整段文本的min-content宽度。浏览器必须先满足这个下限，再分配剩余空间，结果就是一列被顶宽、其他列被压缩到极限。
- 打开 DevTools 的 Computed 面板，检查子项的
min-width是否真为auto（不是0或unset） -
white-space: nowrap只是暴露问题，不是根源；哪怕没写它，长URL或中文单字换行也会让min-content极小，导致列高抖动 - 仅靠
overflow: hidden加在容器上无效——内容根本没溢出，是轨道被拉宽了
怎么让1fr真正按比例分配，而不是被内容撑开
必须同时切断两层约束：轨道定义层 + 子项渲染层。
- 在
grid-template-columns里把1fr换成minmax(0, 1fr)——告诉浏览器“这列可以缩到0，别管内容多宽” - 给网格直接子元素（如
.grid > .item）加min-width: 0——解除子项对min-content的强制守卫 - 若子项内部还有
display: flex或display: grid，其直接子元素也得同步加min-width: 0，否则撑开会逐层传递
min-content不是属性，是计算陷阱
你不能写min-content: 100px，但它的影响无处不在：1fr默认等价于minmax(min-content, 1fr)，auto列就是按min-content算的。中文每个字都可折行，min-content≈一个汉字宽；超长URL会被字符级拆分，导致高度暴涨。
立即学习“前端免费学习笔记（深入）”；
- 动态内容（如 React 列表中 key 复用+标题长度突变）会触发同步重排，DevTools Layout 面板能看到频繁的 layout cycle
-
fit-content(200px)比min-content更可控：有上限兜底，下限由内容自然撑开 - 想彻底规避？别在列定义里用
min-content，改用max-content配固定宽区域，或直接上minmax(0, 1fr)
最常被漏掉的是嵌套结构里的min-width: 0——图片、<pre class="brush:php;toolbar:false;"></pre>、<table>这些固有尺寸元素，只要在 Grid 子项内部，就得单独处理，否则<code>minmax(0, 1fr)形同虚设。
