grid-gap 是设置网格行与列间距的简写属性，可统一卡片间距。它等同于 row-gap 与 column-gap 的组合，如设置 grid-gap: 20px 可使行列间隔均为20px；也可单独设置行列间距以优化布局，例如图文卡片使用 row-gap: 30px, column-gap: 16px 增强可读性。结合媒体查询，响应式布局中可调整间距，如大屏用 gap: 20px，小屏改为 gap: 12px 避免松散。现代推荐使用 gap 属性，兼容 grid 与 flexbox，语法更通用，浏览器支持良好，提升卡片布局整洁度。
在CSS Grid布局中，想要让卡片之间的间距统一，grid-gap 是最直接有效的属性。它能同时控制行与列之间的间距，使布局整齐美观。
什么是 grid-gap？
grid-gap 是 row-gap 和 column-gap 的简写形式，用于设置网格行与行、列与列之间的间距。使用它可以让卡片之间保持一致的空白，避免内容拥挤。
例如：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
这表示每行和每列之间都有 20px 的间距。
立即学习“前端免费学习笔记（深入）”；
单独控制行列间距
如果需要不同的行间距和列间距，可以分别使用 row-gap 和 column-gap。
- row-gap：设置行与行之间的间距
- column-gap：设置列与列之间的间距
示例：
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
row-gap: 30px;
column-gap: 16px;
}
这样纵向间隔更大，适合图文卡片，提升可读性。
响应式卡片布局中的应用
结合媒体查询和 grid-gap，可以在不同屏幕下调整间距，保持视觉舒适。
.card-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 20px;
}
<p>@media (max-width: 768px) {
.card-container {
grid-gap: 12px;
}
}
小屏幕下缩小间距，避免内容被压缩得太松散。
兼容性与现代用法
grid-gap 在现代浏览器中支持良好。注意不要与已废弃的 grid-row-gap 和 grid-column-gap 混淆，推荐使用标准简写。
目前主流写法就是直接使用 gap（grid-gap 的别名）：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px; /* 推荐写法 */
}
gap 在 Flexbox 和 Grid 中都适用，更通用。
基本上就这些。用好 gap 或 grid-gap，卡片布局的整洁度会明显提升。不复杂但容易忽略细节。
