fr单位撑开容器的根本原因是其作为“剩余空间分配单位”不设下限，当子项内容尺寸超分得空间时强制扩展容器；需用minmax(0, 1fr)替代并配合min-width: 0等约束防溢出。
Grid中fr单位为什么会撑开容器导致溢出
根本原因是fr是“剩余空间分配单位”，它不设下限，当子项内容（比如长文本、图片、固定宽高元素）本身尺寸超过按比例分得的可用空间时，Grid容器会强制扩展自身来容纳——哪怕父容器有max-width或overflow: hidden，也拦不住这种内在膨胀。
典型现象：grid-template-columns: repeat(3, 1fr) 在窄屏下把三列硬压进小宽度，但某列里有个width: 200px的按钮，结果整行被顶宽，横向滚动条出现。
-
fr不响应内容最小尺寸，只响应可用空间 - 浏览器不会自动为
fr列添加min-width: 0（需手动加） - 嵌套Grid或flex子项未设置
min-width: 0时，溢出会逐层传导
用minmax()替代fr控制最小可缩放边界
minmax()能显式定义轨道的弹性区间，比fr更可控。关键不是“不用fr”，而是用minmax(min, max)把max设为fr，min设为内容可接受的底线（如0、min-content或具体像素值）。
例如将1fr改为minmax(0, 1fr)，就等于告诉浏览器：“这列可以缩到0，别硬撑”。
立即学习“前端免费学习笔记（深入）”；
- 写法：
grid-template-columns: repeat(3, minmax(0, 1fr)) - 若需保底宽度（如卡片最小300px），改用
minmax(300px, 1fr) - 搭配
overflow: hidden或text-overflow: ellipsis才真正生效 - 注意：IE不支持
minmax()，如需兼容请绕过或降级
auto-fill与auto-fit如何配合minmax()实现响应式列数
单纯用repeat(3, ...)是固定列数，无法适配不同屏幕。而auto-fill会在可用空间内尽可能多地填入符合minmax()约束的轨道；auto-fit则会把空轨道收缩为0（更常用）。
典型写法：grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)))——意思是在容器里塞尽可能多的、宽度至少320px、最多均分剩余空间的列。
-
auto-fill：占位但不收缩，适合需要JS监听列数的场景 -
auto-fit：空轨道直接消失，视觉上更干净，推荐首选 - 必须配合
minmax()使用，单独auto-fit无意义 - 列内元素仍需设
min-width: 0防内部溢出（尤其含图片/iframe时）
容易被忽略的配套CSS细节
只改grid-template-columns还不够。溢出常因子项“太倔”——默认min-width: auto会阻止收缩，尤其在含内联元素、表格、媒体对象时。
- 给Grid子项统一加
min-width: 0（或min-width: min-content按需） - 图片/视频加
max-width: 100%; height: auto - 长文本容器加
overflow: hidden; text-overflow: ellipsis; white-space: nowrap - 避免子项用
width: 100%+padding组合（会突破轨道宽度），改用box-sizing: border-box
真正的难点不在Grid语法本身，而在理解“谁在撑开谁”——有时候问题不在fr，而在某个没设min-width: 0的<div>里嵌了个<code><table>。</table>
