应将固定像素列替换为minmax(0, 1fr)并配合子项min-width: 0，同时确保父容器box-sizing: border-box且无外层flex干扰；像素列总和超容器宽时，改用1fr分配剩余空间。
grid-template-columns 用像素值导致列总宽超容器
直接写 grid-template-columns: 200px 300px 150px 是最常见“超宽”源头。浏览器会严格按数值相加（200+300+150=650px），哪怕父容器只有 600px 宽，它也不会自动缩放——而是让整个 Grid 容器横向溢出，触发滚动条或破坏布局流。
解决方法不是删掉像素值，而是用弹性单位替代固定总和：
- 把其中一列或几列换成
1fr，例如200px 1fr 150px：前/后列固定，中间列吃掉所有剩余空间 - 全用
1fr（如1fr 1fr 1fr）：三等分可用宽度，天然防超 - 混用时注意顺序：
1fr 200px和200px 1fr行为一致，但若写成1fr 200px 1fr，200px 列会被优先分配，两边1fr再平分剩下部分
minmax(0, 1fr) 被忽略导致内容撑开轨道
写了 1fr 还是超？大概率是没处理 min-content 阻塞。比如一列里放了长单词、未约束的图片或 flex 子项，1fr 默认下限是内容最小宽度（min-content），浏览器宁可拉宽整列也不截断。
必须显式把下限压到 0：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 把
1fr全部替换成minmax(0, 1fr)，例如grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) - 这个
0不是让列消失，而是告诉 Grid：“允许收缩到 0，让overflow或text-overflow生效” - 特别注意：Safari 14.1 及更早版本对
minmax(0, 1fr)支持不稳定，可加特性检测降级：@supports (grid-template-columns: minmax(0, 1fr))) { ... }
父容器 box-sizing 或 padding 导致“隐形超宽”
明明列宽加起来没超，Grid 还是横向溢出？检查父容器是否漏了 box-sizing: border-box。默认 box-sizing: content-box 下，如果父容器设了 width: 100% + padding: 20px，那实际占用宽度就是 100% + 40px，列再怎么算也得跟着撑。
修复很简单：
- 给 Grid 容器加
box-sizing: border-box - 避免在 Grid 容器上同时写
width: 100%和padding，改用margin外推，或把 padding 移到子项上 - 用开发者工具看 Computed → width，确认真实渲染宽度是否等于预期
嵌套 Grid 或外层 Flex 干扰可用空间计算
Grid 容器被包在 display: flex 的父元素里，且没设 flex: 1 或 width: 100%，会导致 Grid 可用宽度取不到“撑满”的值，1fr 就只能分到一小块，反而让内容挤不进、视觉上像超宽。
这类干扰往往藏得深：
- 检查 Grid 容器的直接父元素是否为 Flex 容器；如果是，给它加
flex: 1或width: 100% - 避免父元素设
max-width: fit-content或display: inline-grid，它们会抑制宽度扩展 - 如果外层用了
position: absolute，确保 left/right 没留空，否则可用宽度可能被误判
px，而是在多层嵌套里判断哪一层的轨道定义需要加 minmax(0, 1fr)、哪一层该砍掉 padding、哪一层父容器其实根本没拿到宽度上下文。漏掉任何一层，溢出就还在那儿。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
