gap仅在display: grid/inline-grid容器上生效，父级非Grid/Flex布局时会被静默忽略；它只控制项目间间距，不处理容器边缘，需用padding/margin解决内外留白。
gap 只在 grid 容器上生效，不是给子元素加的
很多人写 gap 没效果，第一反应是“属性写错了”，其实根本原因是父容器没设成 display: grid 或 display: inline-grid。浏览器对 gap 的处理非常严格：只要父级是 block、inline 或其他非 Grid/Flex 布局，gap 就会被静默忽略，连 warning 都不报。
必须确保：
- 父容器声明了
display: grid（或inline-grid） - 子元素是直接子节点（
display: none的项不参与 gap 计算） - 没被更上层的
display: contents或display: inline截断布局上下文
gap 不会和 margin 叠加，但混用会出视觉偏差
gap 是网格轨道之间的空白，它不占用子元素的盒模型，也不触发 margin 折叠；而 margin 是元素自身的外边距，会溢出、会折叠、会影响对齐基准线。两者逻辑层面完全不同。
常见踩坑点：
- 给
.item同时设margin: 10px和父容器gap: 16px→ 实际间距变成 26px（叠加），且边缘多出 10px 空白 - 用
gap控制列间距，又用margin-right对齐最后一列 → 右侧多出冗余空白 - 响应式中只改
margin，忘了同步调gap→ 间距体系断裂
正确做法：一旦用了 gap，子元素就该清空所有用于控制间隔的 margin（padding 和容器 padding 仍可保留，它们负责内边距和外边距）。
row-gap 和 column-gap 比 gap 更可控，尤其在响应式中
虽然 gap: 16px 看起来简洁，但它把行、列间距绑死为同一值。设计稿常要求“移动端列紧凑、行宽松”，或“桌面端横向留白多、纵向紧凑”——这时单靠 gap 就不够用了。
推荐写法：
- 始终拆开写：
row-gap: 24px; column-gap: 12px;，避免gap: 24px 12px在 Safari 14 及更早版本失效 - 媒体查询中只调一个方向：
@media (min-width: 768px) { .container { row-gap: 16px; } } - 注意方向绑定：
flex-direction: column时，row-gap实际控制的是“列之间”的垂直距离，别被名字误导
gap 不处理容器边缘，留白要靠 padding 或 margin
gap 只作用于“项目与项目之间”，它不会在第一个项目前、最后一个项目后、最左列左侧、最右列右侧生成空白。这是它的设计本意，也是和 margin 最本质的区别。
所以如果你发现网格贴着容器边缘，不要试图用 gap 解决：
- 想让整体居中并留边？用容器的
padding - 想让网格和其他兄弟元素保持距离？用容器的
margin - 想让第一行/列离顶部/左侧有额外空间？只能靠
padding-top或padding-left
真正容易被忽略的，是团队协作时把 gap 当成“万能间距工具”——它只管内部节奏，不管内外衔接。留白责任必须明确划分：容器 padding 负责内边距，容器 margin 负责外边距，gap 只负责项目间呼吸感。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
