1fr撑破容器是因为其默认等价于minmax(min-content, 1fr)，优先保证子项最小内容宽；需同时将轨道设为minmax(0, 1fr)并给直接子项设min-width: 0，图片和文字还需额外处理。
为什么 grid-template-columns: 1fr 会撑破容器
因为 1fr 默认等价于 minmax(min-content, 1fr)，浏览器会优先保证子项的最小内容宽度（比如一张未约束的图片、一段无空格的 URL），哪怕这会让整列宽到超出容器。你看到的“溢出”，其实是轨道被拉宽了，不是内容真跑出去了。
必须同时改两处：轨道定义 + 子项样式
只改一边基本无效。漏掉任何一环，撑破照旧：
- 在
grid-template-columns或grid-template-rows中，把1fr换成minmax(0, 1fr)—— 例如：grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) - 给网格容器的直接子元素（如
.grid > .item）加min-width: 0（行/列方向同理，需配min-height: 0） - 如果子项内部还有嵌套的
display: grid或display: flex，它的直接子元素也得加min-width: 0，否则撑会逐层传导
图片和文字要额外处理
minmax(0, 1fr) + min-width: 0 解决的是“能不能缩”，不是“缩了怎么显示”。具体还得按内容类型补措施：
- 图片：
max-width: 100%; height: auto;—— 否则固有尺寸绕过所有收缩逻辑 - 单行文本截断：
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;（三者缺一不可） - 多行长文本换行：
overflow-wrap: break-word;或word-break: break-all; - 绝对定位图片（如网格单元内填图）：
.grid-elt { position: relative; }+.img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; }
Safari 和嵌套布局最容易翻车
Safari 14.1 及更早版本对 minmax(0, 1fr) 解析不稳定，可能让列宽归零或错乱；嵌套 Grid 时，min-width: 0 必须作用在每一层的直接子元素上。真正难的不是写对一行 minmax(0, 1fr)，而是判断“该在哪一层加”——Grid 容器？某条 grid-template-rows？还是某个具体 grid-area 的直接子元素？漏掉一层，溢出就还在那儿。
立即学习“前端免费学习笔记（深入）”；
