根本原因是 gap 与百分比混用、inline-grid 误用及 box-sizing/根边距未重置导致溢出；应改用 fr 单位、禁用 width:100%、全局设 border-box 和清空 html/body 边距。
根本原因不是 Grid 本身“出错”，而是 grid-template-columns 用百分比 + gap 混搭，或容器盒模型、显示类型等底层机制被忽略，导致浏览器按规范“老实计算”出了超出预期的宽度。
grid-template-columns 百分比 + gap 直接叠加溢出
写 grid-template-columns: 25% 50% 25% 看似刚好 100%，但加上 gap: 10px 后，浏览器实际计算为 25% + 10px + 50% + 10px + 25% → 总宽 = 100% + 20px。多出来的像素无处安放，只能横向溢出。
- 改用
fr单位：grid-template-columns: 1fr 2fr 1fr，fr是在 gap 分配完后、剩余空间里切分，天然避坑 - 必须用百分比？手动扣减：
calc((100% - 20px) / 3)（三列两 gap），但响应式下易失效，维护成本高 - 避免
minmax(200px, 100%)这类写法——100%在 track 定义中仍会和 gap 叠加
子项 width: 100% 不但无效还加剧溢出
网格项设 width: 100%，是相对于父容器 content area 计算，不是它所在的 grid track；而 track 宽度本身已被 gap、padding、box-sizing 压缩或推挤，结果往往是子项比 track 还宽。
- 删掉所有网格项上的
width: 100%、max-width: 100% - 填满 track 靠默认行为：
justify-self: stretch（不用写） - 若子项内有图片或长文本撑开，加
min-width: 0防止它拒绝收缩
display: inline-grid 让容器“锁死”宽度
display: inline-grid 会让容器表现得像 span，宽度只包裹内容，无视 width: 100%、grid-template-columns: 1fr 等声明，是“锁死”最隐蔽的元凶。
- 用开发者工具检查容器
display值，若为inline-grid，立刻换为grid -
inline-grid仅适用于小图标组、行内按钮等微布局；主内容区必须用display: grid - 换完仍不撑开？继续查父容器是否设了
max-width、min-width: 0，或子项带min-width: auto
box-sizing 和 html/body 默认边距没清干净
即使 Grid 写对了，box-sizing: content-box（默认）会让 padding 和 border 额外叠加；而 html、body 默认 8px margin 会让容器“先天不足”，再怎么设 width: 100% 也撑不满视口。
- 全局重置：
* { box-sizing: border-box; }（含伪元素可加*::before, *::after） - 根级清边距：
html, body { margin: 0; padding: 0; height: 100%; } - 容器本身别画蛇添足写
width: 100%——display: grid的块级容器默认就占满父级可用宽度
真正卡住宽度的，往往不是某一行 CSS，而是 gap 与百分比的耦合、inline-grid 的语义误用、以及 box-sizing 和根级边距这些“看不见”的约束层层叠加。排查时优先看 computed 样式，而不是代码里写了什么。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
