1fr导致网格项撑开整列是因为它等分剩余空间且无下限，子项min-content（如长URL、图片）决定轨道最小宽度；需同时设置minmax(0, 1fr)和子项min-width: 0才能生效。
为什么1fr会让网格项撑开整列
1fr不是“最大宽度限制”，而是“等分剩余空间”的分配指令，它默认不设下限。浏览器会先按子项的 min-content（比如一个无空格的长URL、未换行的英文单词、一张未约束的图片）确定该轨道能缩到多窄——这个最小值就是子项内容本身的自然宽度，而非你期望的“尽可能小”。结果就是：一列被撑宽，其他列被迫压缩甚至消失，横向滚动条出现。
光加overflow: hidden为什么没用
因为溢出根本没发生——内容还没“溢出”容器，而是让容器自己先变宽了。Grid 轨道计算发生在布局阶段，overflow: hidden 控制的是渲染阶段的内容裁剪，两者不在同一层。你在开发者工具里看到 grid-template-columns: 1fr 1fr 没变，但 computed width 差距巨大，正是这个原因。
-
overflow: hidden加在 Grid 容器上，只对超出容器边界的像素起作用；但轨道已被拉宽，内容仍在“容器内”，只是容器变大了 - 真正需要裁剪的对象是网格项（
.grid > *），不是 Grid 容器本身 - 漏掉
min-width: 0，overflow: hidden就永远没机会生效
必须同时改两处：minmax(0, 1fr) + min-width: 0
minmax(0, 1fr) 是轨道层声明：“这列可以缩到 0”，但它只是开门；min-width: 0 是子项层响应：“我愿意进门”。缺一不可。
-
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)—— 告诉 Grid 轨道可收缩 -
.grid > * { min-width: 0; }—— 解除子项默认的min-width: auto阻力 - 嵌套 Grid 或 Flex 子项也要同步加
min-width: 0，否则撑开会逐层传导 - 图片、
<pre>、<table>等固有尺寸元素最容易漏掉这步
移动端和嵌套布局中最容易翻车的地方
真正难的不是写对 minmax(0, 1fr)，而是在多层嵌套中判断“该在哪一层加”。是 Grid 容器？某条 grid-template-rows？还是某个 grid-area 的直接子元素？漏掉一层，溢出就还在那儿。
立即学习“前端免费学习笔记（深入）”；
Safari 14.1 及更早版本对 minmax(0, 1fr) 解析异常，可用 @supports (grid-template-columns: minmax(0, 1fr)) 做特性检测，降级方案优先考虑 minmax(min-content, 1fr) + min-width: 0 + width: 100%。
