在CSS网格布局中，grid-gap是用来统一设置网格行与行、列与列之间间距的属性，它可以让开发者快速调整网格项的排列疏密程度，避免手动给每个网格项添加外边距带来的布局混乱问题。
grid-gap的基本语法
grid-gap是grid-row-gap和grid-column-gap的简写属性，基本语法格式如下：
/* 同时设置行间距和列间距为20px */
.grid-container {
display: grid;
grid-gap: 20px;
}
/* 分别设置行间距为15px，列间距为30px */
.grid-container {
display: grid;
grid-gap: 15px 30px;
}
/* 仅设置列间距，行间距为0 */
.grid-container {
display: grid;
grid-gap: 0 25px;
}
如果只给grid-gap设置一个值，那么这个值会同时应用到行间距和列间距上；如果设置两个值，第一个值对应行间距，第二个值对应列间距。
不同取值的效果说明
grid-gap的取值可以是长度单位（如px、rem、em）、百分比，也可以是normal关键字，不同取值的效果如下：
- 长度单位：直接指定固定的间距大小，比如20px就表示网格之间间隔20像素，是最常用的取值方式。
- 百分比：间距大小基于网格容器自身的宽度计算，容器宽度变化时间距会同步变化，适合响应式布局场景。
- normal：默认值，通常等同于0，部分浏览器可能会有默认的微小间距，但标准中没有明确固定值。
实际使用示例
下面是一个完整的网格布局示例，展示grid-gap的实际效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>grid-gap示例</title>
<style>
.grid-box {
display: grid;
/* 定义3列，每列等宽 */
grid-template-columns: repeat(3, 1fr);
/* 设置行间距和列间距都是15px */
grid-gap: 15px;
width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
.grid-item {
height: 80px;
background-color: #4a90e2;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
}
</style>
</head>
<body>
<div class="grid-box">
<div class="grid-item">网格项1</div>
<div class="grid-item">网格项2</div>
<div class="grid-item">网格项3</div>
<div class="grid-item">网格项4</div>
<div class="grid-item">网格项5</div>
<div class="grid-item">网格项6</div>
</div>
</body>
</html>
在这个示例中，6个网格项会按照3列2行排列，每个网格项之间的水平和垂直间距都是15px，整体布局整齐统一。
注意事项与兼容性问题
需要注意，grid-gap最初是网格布局的专有属性，后来标准更新后更名为gap，新的gap属性不仅可以用于网格布局，还可以用于弹性布局（flex布局）。目前大部分现代浏览器都已经支持gap属性，而旧版本的浏览器可能只支持grid-gap写法。
如果需要兼容旧版浏览器，可以同时写两个属性：
.grid-container {
display: grid;
grid-gap: 20px; /* 旧版浏览器兼容 */
gap: 20px; /* 新版标准写法 */
}
另外grid-gap不会影响网格容器和父容器之间的间距，只作用于网格项内部的行和列之间，如果需要调整容器外部间距，需要额外给容器设置margin属性。
CSSgrid-gap网格布局grid_template_columns修改时间：2026-06-16 02:48:32