grid-gap用于设置css网格布局中行与列的间距，可简写为一个或两个值，分别表示行列间距，也可用row-gap和column-gap单独设置，现代推荐使用gap属性替代，支持px、em、rem、%等单位，有助于提升布局清晰度与响应式设计。
在 CSS Grid 布局中，grid-gap 用于设置网格行与列之间的间距。它是一个简写属性，可以同时设置行间距（row gap）和列间距（column gap），也可以分别使用 row-gap 和 column-gap 单独控制。
基本语法
grid-gap 接受一个或两个长度值：
- 一个值：表示行和列的间距相同
- 两个值：第一个是 row-gap（行间距），第二个是 column-gap（列间距）
示例：
.container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 200px; grid-gap: 10px; /* 行和列都间隔 10px */ }
如果想让行间距为 20px，列间距为 10px：
立即学习“前端免费学习笔记（深入）”；
.container { grid-gap: 20px 10px; }
单独设置行或列间距
你也可以只调整其中一种间距，使用更现代的独立属性：
- row-gap：设置行之间的间距
- column-gap：设置列之间的间距
示例：
.container { display: grid; grid-template-columns: repeat(3, 1fr); row-gap: 15px; column-gap: 20px; }
这等同于：
grid-gap: 15px 20px;
支持的单位
grid-gap 支持多种长度单位：
- px：固定像素值
- em / rem：相对字体大小
- %：相对于容器尺寸的百分比
- fr：不推荐用于 gap，gap 不参与弹性分配
小技巧：
使用 rem 可以实现响应式间距，配合媒体查询更容易控制不同设备下的布局呼吸感。
注意事项
- grid-gap 不会影响网格容器的外边距，只作用于网格项目之间
- 旧版浏览器可能需要使用 gap 替代（现代标准已统一）
- 目前主流浏览器已支持 gap 作为 grid-gap 的别名，未来推荐直接使用 gap
例如现代写法：
.container { display: grid; gap: 16px; /* 推荐新写法 */ }
基本上就这些。合理使用 grid-gap 或 gap 能让你的网格布局更清晰、易读，避免手动用 margin 控制间距带来的复杂性。