gap不会撑宽容器，仅从content area中扣除空间；列数为n时列间gap数量为n−1，显式计算列宽需预先减去全部gap值，且子项box-sizing必须为border-box以防溢出。
gap 不会撑宽容器，但会吃掉 content area
很多人看到横向滚动条或内容溢出，第一反应是“gap把容器撑开了”，其实不是。浏览器计算容器总宽度时，gap根本不参与width或border-box尺寸累加；它只是强制在网格轨道（track）之间留白——而这个留白，必须从容器的content area里扣出来。
典型翻车场景：width: 400px + padding: 16px → content area只剩 368px；再放两列各180px + gap: 20px → 实际占用180 + 20 + 180 = 380px，已经超了。
关键点：
- 列数为
n时，列间gap数量是n − 1（行同理） -
grid-template-columns定义的是轨道可用宽度，不是子项最终渲染宽度 - 用
fr单位时，浏览器自动扣除gap、padding、border后再分配，但前提是 content area 足够大
显式计算列宽时必须反向减去 gap 总量
当你需要精确控制列宽（比如三列等宽 + 固定间距），不能只写 grid-template-columns: 100px 100px 100px 然后加 gap: 12px 就完事——因为三列有**两个**列间 gap，总共要预留 2 × 12px = 24px。
正确做法是反向推算单列可用宽度：
.grid {
width: 360px;
padding: 0; /* 先清空干扰 */
display: grid;
/* 三列，每列实际占多少？(360 − 2×12) ÷ 3 = 112px */
grid-template-columns: 112px 112px 112px;
gap: 12px;
}
混合单位如 200px 1fr 时，先扣掉固定部分和所有 gap，剩余空间才给 1fr 分配。
box-sizing: border-box 没生效是溢出最常见原因
即使你把 grid-template-columns 算对了，子项仍可能撑破轨道——因为子项默认 box-sizing: content-box，它的 padding 和 border 会额外加在轨道宽度之外。
验证方式很简单：打开 DevTools → Elements → 选中某个网格子项 → 看 Computed 面板里的 box-sizing 值是不是 border-box。如果不是，大概率被以下情况覆盖：
- 全局重置样式没包含
* { box-sizing: border-box } - 子项上写了
box-sizing: content-box且优先级更高 - 用了第三方 UI 库，其组件内部重设了
box-sizing
只要子项设置了 width: 100% 或固定像素宽，又没设 box-sizing: border-box，就极可能溢出。
gap 和 margin 混用会导致间距叠加不可控
gap 是容器级轨道间隙，margin 是子项自身外边距，二者物理位置不同、不合并、不抵消，混用就是直接叠加。
比如 gap: 12px + 子项 margin: 8px，视觉间距约 20px，不是“覆盖”也不是“保险”。更糟的是，margin-top 在首行 item 上常失效，margin-bottom 在末行易溢出容器，还可能触发外边距合并（margin collapse）。
真正该用 margin 的场景极少，仅限于：
- 让某一项右对齐：
margin-left: auto - 首行离容器顶边留空 → 改用容器
padding-top，而非子项margin-top - 最后一项底部额外留空 → 单独给该项加
margin-bottom，但需确认父容器未设align-items: stretch
绝大多数“项间距离”需求，应该删掉所有子项的 margin-right/margin-bottom 类，统一用 gap 控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
