Grid 布局内容溢出的解决核心是用 minmax() 设定轨道弹性范围并配合 overflow 控制单元格内容显示：minmax(auto, 1fr) 实现自适应伸缩，overflow: hidden/auto/ellipsis 适配不同内容类型，避免 fr 单位单独使用导致撑破。
Grid 布局中内容溢出，核心是单元格尺寸固定而内容动态增长导致的“撑破”现象。解决思路不是强行截断，而是提前规划单元格的弹性行为：用 minmax() 定义尺寸范围，配合 overflow 控制内容显示方式，让网格既保持结构稳定，又兼顾内容可读性。
用 minmax(auto, max-content) 让列 / 行自适应伸缩
默认 grid-template-columns 或 rows 设为固定值（如 200px）时，内容超长就会溢出。改用 minmax() 可设定最小不压缩、最大不扩张的边界：
- minmax(min, max) 中 min 推荐用 auto（适应内容最小高度 / 宽度），max 用 max-content（允许撑开但不无限延展）或具体值如 1fr
- 例如：
grid-template-columns: minmax(auto, 1fr) minmax(auto, 2fr);—— 两列按比例分配剩余空间，但各自至少容纳自身最短内容 - 对文本类内容，
minmax(0, 1fr)更激进：允许压缩到 0 宽度（需配合 overflow 使用）
给单元格单独设置 overflow 控制内容呈现
即使网格轨道有弹性，单个 grid item 内容仍可能超出自身区域。此时需在 item 上设置 overflow：
- overflow: hidden —— 简单裁剪，适合头像、图标等非文本内容
- overflow: auto —— 内容超长时出现滚动条（仅在需要时），用户体验较友好
- text-overflow: ellipsis 需配合 white-space: nowrap 和 overflow: hidden，适用于单行标题截断
- 多行省略可用 display: -webkit-box 方案，但注意兼容性；更稳妥的做法是限制行数 + overflow: hidden
避免常见陷阱：fr 单位与 minmax 的配合误区
fr 是分配剩余空间的单位，本身不设上限；若未用 minmax 包裹，直接写 1fr 2fr，当内容极小时单元格会收缩到内容最小尺寸，但内容极大时仍可能撑爆容器（尤其父容器无宽高限制时）：
- 错误写法：
grid-template-columns: 1fr 2fr;→ 缺少最小保护，小屏下文字换行异常或溢出 - 推荐写法：
grid-template-columns: minmax(min-content, 1fr) minmax(min-content, 2fr);→ 至少显示单词级内容，再按比例伸展 - 对固定内容（如按钮、开关），可用
minmax(max-content, max-content)锁定尺寸
基本上就这些。关键不是选一个属性，而是把 minmax 当作轨道的“弹性围栏”，把 overflow 当作单元格的“内容守门员”——两者配合，网格才能既稳又活。
