gap不增加容器width，但会从content area中挤占空间，若box-sizing未生效、padding存在或width固定，易因subpixel舍入导致溢出。
gap 本身不增加容器总宽度，但会放大盒模型误差
gap 的像素值不会直接加到容器的 width 上，但它会强制在 grid track 之间插入空白，而这些空白必须从容器的 content area 中“挤”出来。一旦 box-sizing 没生效、padding 存在或 width 固定，content area 就会被压缩，gap 就成了压垮平衡的最后一根稻草。
常见错误现象：
- 设置了
width: 400px和padding: 10px，content area 实际只剩 380px；再加gap: 20px（两列间），列宽总和 + gap 必须 ≤ 380px —— 稍有计算偏差（比如 subpixel 渲染向上取整）就溢出 - DevTools 的 Computed 面板里
box-sizing显示为content-box，说明它根本没生效
快速验证方式：
- 打开 DevTools → 选中 Grid 容器 → Computed 面板查
box-sizing值 - Layout 面板勾选 “Show box model”，看 padding 区是否已占满 border box
- 临时加一句
* { box-sizing: border-box }到 CSS 顶部，如果溢出消失，就是继承/覆盖问题
grid-template-columns 用百分比 + gap 是最危险组合
写 grid-template-columns: 25% 50% 25% 看似刚好 100%，但加上 gap: 10px 后，浏览器实际计算为 25% + 10px + 50% + 10px + 25% → 总宽 = 100% + 20px。多出来的像素无处安放，只能横向溢出。
为什么不能靠 calc() 补救？
-
calc((100% - 20px) / 3)在响应式场景下极易失效：屏幕缩放、字体度量微调、subpixel 渲染都会让结果偏离预期 -
minmax(200px, 100%)这类写法中，100%仍按 content area 计算，照样和 gap 叠加
真正可靠的替代方案：
- 改用
fr单位：grid-template-columns: 1fr 2fr 1fr—— 浏览器先扣掉所有 gap，再分剩余空间 - 若必须用百分比布局，应把 gap 拆进 track 定义里，例如
grid-template-columns: 25% 10px 50% 10px 25%（但语义差、维护难）
子项上写 width: 100% 是雪上加霜
网格项设 width: 100% 是相对于父容器的 content area 计算，不是它所在的 grid track；而 track 宽度本身已被 gap、padding、box-sizing 压缩或推挤，结果往往是子项比 track 还宽。
典型翻车点：
- 图片、长 URL、未换行文本默认
min-width: auto（即min-content），会拒绝收缩，强行撑开轨道 - 子项内部还有
display: grid或display: flex，但没给它的直接子元素加min-width: 0，撑开会逐层传导 - 第三方组件（如 Ant Design 的卡片）默认不带
min-width: 0，必须手动覆盖
正确做法：
- 删掉所有网格项上的
width: 100%、max-width: 100% - 填满 track 靠默认行为：
justify-self: stretch（不用写） - 关键子项显式加
min-width: 0+overflow: hidden+text-overflow: ellipsis（配white-space: nowrap）
inline-grid 是最隐蔽的“锁死”元凶
display: inline-grid 让容器表现得像 <span></span>，宽度只包裹内容，无视 width: 100%、grid-template-columns: 1fr 等声明。它不会撑满父容器，也不会响应流式宽度，是导致“明明写了 1fr 却不占满”的头号嫌疑。
怎么确认是不是它？
- DevTools Elements 面板里看该元素的 computed
display值是不是inline-grid - 临时改成
display: grid，观察宽度是否恢复正常
修复很简单：除非真需要内联行为，否则一律用 display: grid。如果必须保留 inline-grid，就得配合 width: 100% + max-width: 100% + 显式 box-sizing: border-box，但不如直接换掉来得干净。
最常被忽略的一点：gap 的像素值在 subpixel 渲染下可能被浏览器向上取整，尤其在缩放或高 DPI 屏幕下——哪怕理论计算刚好卡在边界，也可能差 1–2px 就触发滚动条。所以 box-sizing 必须稳，不能靠“差不多”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
