网格溢出需协同控制盒模型、轨道约束与子项尺寸：全局设box-sizing:border-box；轨道用minmax()/fit-content()；子项设min-width:0；图文内容配max-width/word-break等。
网格布局中内容溢出，本质是子元素尺寸突破了网格轨道分配的空间，而根源常藏在盒模型计算和尺寸声明方式里。解决不能只靠 overflow 一刀切，得从“容器怎么算宽高”和“内容怎么占空间”两个层面协同控制。
先统一盒模型：用 box-sizing: border-box
默认 content-box 下，设置 width: 100% + padding: 16px + border: 1px 会让实际宽度超父容器，直接撑开网格项。这在 Grid 中尤其隐蔽——看似没设 width，但子元素内部的 padding/border 可能悄悄突破轨道限制。
- 全局加一行：
* { box-sizing: border-box; }，让所有元素的 width/height 包含 padding 和 border - 对网格子项单独加固：
.grid-item { box-sizing: border-box; }，避免第三方组件或内联样式干扰
约束网格轨道本身：用 minmax() 和 fit-content()
Grid 列宽若写死 200px 或只用 1fr，遇到长文本、大图或固定宽子元素时极易被撑开。应主动为轨道设弹性边界：
-
grid-template-columns: minmax(250px, 1fr) minmax(300px, 2fr);—— 每列最小不小于设定值，最大也不无限膨胀 -
grid-template-columns: fit-content(400px) 1fr;—— 首列按内容自适应，但上限 400px，防长标题撑爆 - 避免纯
fr单位配无约束内容；搭配max-width或inline-size更稳妥
压制子元素“撑开欲”：min-width: 0 是关键开关
Grid 子项默认有 min-width: auto（等效于 min-content），意思是“至少要容下最长单词或不可断行内容”。这对英文长串、URL、base64 字符串就是灾难。
立即学习“前端免费学习笔记（深入）”；
- 必须显式重置：
.grid-item { min-width: 0; }，这是 Grid/Flex 布局中防止溢出的底层前提 - 配合
overflow: hidden或overflow: auto才真正生效；单设 overflow 不解决根本 - 如果子项内还有嵌套 Flex/Grid，同样需对其子元素设
min-width: 0
文本与媒体内容专项处理
图片、视频封面、长标题等非文本元素容易无视网格约束，需单独干预：
- 图片统一加：
img { max-width: 100%; height: auto; display: block; } - 长文本（尤其无空格字符串）：
word-break: break-all;或overflow-wrap: break-word; - 单行标题截断：
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - 多行截断（WebKit/现代浏览器）：
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
不复杂但容易忽略：溢出不是 bug，是尺寸规则未对齐的信号。把 box-sizing、min-width: 0、minmax() 和 word-break 四者配齐，网格就能稳住骨架，内容再野也跑不出格子。
