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 布局的开发效率和维护性，让网页结构更清晰。不复杂但容易忽略。
