加 overflow-wrap: break-word 和 min-width: 0 是最直接有效的解法，缺一不可；前者允许长单词内断行，后者覆盖默认 min-width: auto 使 Grid 能压缩子项宽度，避免撑破 minmax() 下限。
加 overflow-wrap: break-word 和 min-width: 0 是最直接有效的解法，缺一不可。
为什么长单词会撑破 minmax() 下限
Grid 的 minmax(250px, 1fr) 只约束轨道宽度，不约束子项内部内容。浏览器默认对英文单词、URL、未换行中文块执行「不折行」策略，min-width: auto 会让子项坚持按最长单词宽度伸展，直接突破轨道最小限制，导致横向溢出或换行错乱。
必须同时设置的两个样式
只设其中一个往往无效：
-
overflow-wrap: break-word：允许在长单词内断行（比word-break: break-all更语义化，保留空格和标点逻辑） -
min-width: 0：覆盖子项默认的min-width: auto，让 Grid 能真正压缩子项宽度——尤其当子项含<img alt="如何在CSS Grid响应式布局中防止长单词撑破自适应单元格" >、<iframe></iframe>或 flex 容器时，这步不能跳过
常见踩坑点
这些写法会让断行失效或降级为块流：
立即学习“前端免费学习笔记（深入）”；
- 子项设了
width: 100%：与 1fr 轨道冲突，引发宽度抖动 - 子项用了
display: flex包裹内容：Grid 轨道协商中断，auto-fit失效 - 父容器没设
box-sizing: border-box：边框/内边距额外增加宽度，挤压可用空间 - 在
minmax()里混用em/rem：字体缩放时列数突变，间接加剧溢出风险
推荐的子项基础样式组合
复制即用，适配绝大多数卡片类网格：
.card {
min-width: 0;
overflow-wrap: break-word;
/* 防止中英文混排时撑开 */
word-break: break-word;
}
如果内容含大量 URL，可额外加 hyphens: auto（需配合 lang 属性）；移动端 WebView 对 overflow-wrap 支持略差，可叠加 word-break: break-all 保底。
真正卡住人的不是 CSS 写法本身，而是子项一旦脱离「可协商尺寸」状态，整个 Grid 响应式链条就静默断裂——它不会报错，只是悄悄退回块级流。
