gap属性是CSS Grid中用于设置网格行与列间距的简写属性，等同于row-gap和column-gap，作用于网格容器，自动在网格项之间创建均匀间隔。语法支持单值统一设置或双值分别定义行、列间距，如gap: 15px或gap: 20px 10px。相比传统margin，gap不会出现在容器边缘，避免了边距重叠与额外空白问题，布局更整洁。适用于卡片、表单、仪表盘等场景，提升可读性与响应式表现。现代浏览器广泛支持，建议优先使用gap控制网格整体间距，避免与margin混用，以增强布局效率与维护性。
在CSS Grid布局中，gap属性是控制网格元素之间间距的最简单高效的方式。它能统一设置行与列之间的间隔，让布局更整洁、易读，无需再通过外边距（margin）手动调整每个项目。
什么是gap属性？
gap 是 row-gap 和 column-gap 的简写属性，用于设置网格行和列之间的间距。它作用于网格容器（grid container），自动应用到所有网格项（grid items）之间，不需要额外计算。
支持的语法形式：- gap: 10px; —— 行与列的间距都为10px
- gap: 10px 20px; —— 行间距10px，列间距20px（先写行，后写列）
- gap: 1em; —— 使用相对单位同样有效
如何使用gap设置网格间距？
只需在定义了 display: grid 的父容器上添加 gap 即可。
示例代码：
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 15px;
}
上面的代码创建了一个三列网格，每个网格项之间都有15px的间距，包括水平和垂直方向。
立即学习“前端免费学习笔记（深入）”；
如果想分别控制行和列的间距：
.container {
display: grid;
grid-template-rows: 100px 200px;
grid-template-columns: 1fr 2fr;
row-gap: 20px;
column-gap: 10px;
}
或使用简写：
gap: 20px 10px;
gap的优势：告别margin重叠与计算烦恼
传统使用margin控制间距时，容易出现边距重叠、首尾多余空白等问题。而gap只在网格轨道之间生效，不会出现在容器边缘，因此布局更干净。
常见应用场景：- 卡片布局：多个卡片等间距排列，响应式下依然整齐
- 表单排版：标签与输入框分行对齐，用gap保持垂直间隔
- 仪表盘布局：面板之间留出呼吸空间，提升可读性
浏览器兼容性与注意事项
现代主流浏览器均支持 gap 属性（包括Chrome、Firefox、Safari、Edge）。注意在旧版本Flexbox中gap也已被支持，但在Grid中更稳定。
避免同时使用 gap 和大量 margin 控制间距，以免造成混乱。优先用 gap 处理整体网格间隔，用 margin 处理个别元素内部布局。
基本上就这些。合理使用 gap 能大幅提升Grid布局的开发效率和维护性，让网页结构更清晰。不复杂但容易忽略。
