padding作用于grid容器自身，会撑大整体尺寸；真正控制网格项间距的是gap属性，它只在轨道间插入空白且不影响容器尺寸。
Grid容器加padding会撑大整体尺寸，不是“网格间距”
很多人给 display: grid 容器加 padding，以为能控制网格项之间的空隙，结果发现容器变大、内容对不齐、甚至触发滚动条。这不是bug，是CSS盒模型的正常表现：padding 作用于容器自身，不是网格线之间的间隙。
真正控制“网格项之间距离”的，是 gap（或旧名 grid-gap），它只作用于网格轨道之间，不影响容器尺寸计算。
-
padding：影响容器的border-box尺寸，会把内容区域往里缩，但网格项仍从内边距边缘开始排列 -
gap：在行与行、列与列之间插入空白，不改变容器尺寸，也不影响justify-items或align-items的基准线 - 如果同时用了
padding和gap，它们效果叠加——padding是外边距，gap是内间隙，别混用目的
gap和margin混用时，子项margin会被忽略
Grid项（grid items）设置了 margin，在绝大多数情况下不会生效——Grid布局中，子项的外边距不会在网格轨道间产生额外空隙，gap 才是唯一受控方式。
例外只有两种：当子项跨越多个轨道（如用了 grid-column: 1 / -1），且其 margin 指向非轨道方向（比如横向跨越时设 margin-top），才可能显示；但这种写法不可靠，不同浏览器行为不一致。
- 别在Grid子项上写
margin试图调间距，99%白费劲 - 想让某几个项“多留点空”，改用
gap配合grid-column/grid-row占位，或用空的伪元素占格 - 需要不对称间距？
gap支持两个值：gap: 12px 8px（行间距 12px，列间距 8px）
IE11不支持gap，但有兼容写法
IE11 完全不识别 gap，连带 grid-gap 也无效（它只认老式 grid-column-gap 和 grid-row-gap）。如果必须兼容IE11，得拆开写，并确保其他浏览器优先用新语法。
CSS会按声明顺序覆盖，所以把现代写法放前面，IE友好的写法放后面（利用IE不识别新属性的特性）：
container {
gap: 16px;
grid-column-gap: 16px;
grid-row-gap: 16px;
}
- 注意：
grid-gap在IE11中虽被解析，但行为异常，建议完全不用 - 如果项目已用 Autoprefixer，它默认不补
grid-column-gap，需手动加配置或改用 PostCSS 插件 - 更稳妥的做法：放弃IE11的gap，用
padding+margin模拟，但要重写整个布局逻辑，成本高
padding配合gap时，注意justify-content/align-content对齐基准
当容器有 padding，又设置了 justify-content: center 或 align-content: center，对齐是相对于 padding 内边界进行的——也就是说，整个网格内容块（含gap）会在 padding 包围的区域内居中，不是相对于容器外边框。
这容易造成视觉错觉：“为什么左边空隙比右边大？” 实际可能是 padding-left 和 gap 共同作用的结果。
- 检查是否误把
padding当成了“网格内边距”，其实它是容器的物理边距 - 想让第一行/列紧贴容器左上，用
justify-content: start+align-content: start，而不是靠减 padding 补偿 - 调试时打开浏览器开发者工具，选中容器，勾选“显示网格线”，能清楚看到 padding 区域和 gap 区域的分界
gap，而是下意识把 padding 当成网格系统的一部分——它从来就不是。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
