使用grid-gap或gap属性可统一CSS Grid中元素间距，推荐用gap实现行列等距排列，提升布局清晰度与维护性。
在使用CSS Grid布局时，保持元素之间的间距统一是常见的设计需求。通过grid-gap属性可以轻松实现行与列之间的等距排列，让页面结构更清晰、美观。
什么是grid-gap
grid-gap 是CSS Grid中的一个简写属性，用于设置网格行和列之间的间距。它能同时控制行间距（row gap）和列间距（column gap），避免手动计算margin带来的错位问题。
现代浏览器已广泛支持gap属性（推荐使用），而grid-gap是其在Grid布局中的旧称，两者在Grid上下文中效果一致。
如何设置统一的行列间距
使用grid-gap时，可以传入一个或两个值：
立即学习“前端免费学习笔记（深入）”；
- 一个值：表示行和列的间距相同
- 两个值：第一个为行间距，第二个为列间距
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px;
grid-gap: 20px; /* 行和列都间隔20px */
}
上面代码会创建一个三列两行的网格，每个单元格之间都有20px的间距，无需额外设置margin。
使用gap代替grid-gap（推荐写法）
虽然grid-gap仍可用，但W3C规范已将其纳入通用gap属性。建议使用gap以提高未来兼容性：
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px; /* 推荐写法 */
}
这样不仅语义更清晰，也能在Flexbox等其他布局中复用相同语法。
实际应用中的注意事项
使用grid-gap或gap时需注意以下几点：
- 容器必须设置
display: grid或display: inline-grid - gap不会影响网格容器的外边距，只作用于内部项目之间
- 不能为负值，最小为0
- 百分比值相对于容器尺寸计算，适合响应式设计
例如在响应式卡片布局中：
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 24px;
}
这样既能保证每项至少250px宽，又能保持统一的24px间隔，适配不同屏幕尺寸。
基本上就这些。合理使用grid-gap或gap，能让Grid布局更加整洁易维护，避免传统浮动或inline-block布局中margin叠加的问题。
