grid布局内容溢出导致网格变形的根本原因是浏览器以min-content为轨道底线，需用minmax(0,1fr)替代1fr、给直接子项设min-width:0，并配合overflow控制策略。
Grid 布局在 H5 页面中内容溢出导致网格变形，根本不是“内容跑出来”那么简单——而是浏览器把长文本、图片或内联元素的 min-content 尺寸 当作底线，强行拉宽轨道，网格结构从内部被撑开。只加 overflow: hidden 到容器上基本无效，滚动条不出现、文字越界、列宽崩坏，都是这个逻辑在起作用。
改轨道定义：用 minmax(0, 1fr) 替代 1fr
默认的 1fr 等价于 minmax(auto, 1fr)，意味着轨道绝不小于内容最小宽度（比如一个超长 URL）。必须显式允许压缩到底线：
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) 200pxgrid-template-rows: minmax(0, 1fr) auto- 对响应式多列，用
repeat(auto-fit, minmax(0, 1fr)))而非auto-fill
给直接子项加 min-width: 0（关键！）
Grid 容器不创建 BFC，子项默认 min-width: auto（即 min-content），这是撑开的源头。这个样式必须加在网格容器的直接子元素上，不是容器本身：
-
.grid > *或具体类名如.grid-item上设min-width: 0（水平方向）或min-height: 0（垂直方向） - 若子项内部是
display: flex或嵌套grid，它的直接子元素也得加min-width: 0，否则撑开会传导 - 框架组件（如 Ant Design Card）需手动覆盖；Vue scoped 样式要用
:deep(.grid-item)
子项自身控制溢出行为
光“松绑”还不够，得明确告诉子项怎么处理内容：
- 单行文本截断：
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;（需父轨道有明确宽度） - 多行文本隐藏：
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; - 长单词/URL 换行：
overflow-wrap: break-word;（比word-break: break-all更安全，尤其 iOS） - 图片必须约束：
width: 100%; height: 100%; object-fit: cover;，且min-width: 0加在图片的父网格项上，不是<img>自身
H5 特别注意事项
移动端环境更易暴露问题：
- Safari（iOS 15–16）对
overflow+transform共存渲染不稳定，滚动卡顿或裁剪错位，可尝试加will-change: auto或避免组合使用 -
minmax(0, 1fr)在 Safari 14.1 及更早版本有兼容性问题，建议用@supports检测降级：minmax(min-content, 1fr)+width: 100%+box-sizing: border-box - 避免依赖
height: 100%，改用100vh或配合flex: 1+overflow-y: auto控制主区域高度，防止整页被撑开
