gap 属性是 css Grid 中控制子元素间距的最佳方式，语法简洁如 gap: 10px 20px；它避免了margin 导致的 外边距 溢出问题，仅作用于项目之间，不产生额外空白，无需负边距修正。结合媒体查询可实现响应式间距，如不同屏幕尺寸下设置不同 gap 值，并与 align-items、justify-items 协同控制对齐，提升布局的可维护性与视觉一致性。
在使用 CSS Grid 布局时，gap 属性是控制子元素之间间距最简洁有效的方式。它能替代传统使用 margin 或 padding 来制造空白，让布局更清晰、响应更灵活。
gap 的基本用法
gap 可以同时设置行与列之间的间距，语法简单：
也可以简写为：
gap: 10px 20px;
这表示行间距为 10px，列间距为 20px。如果只写一个值，则行列间距相同：
立即学习 “ 前端免费学习笔记（深入）”；
gap: 15px; /* 行列都是 15px */
避免外边距溢出的技巧
使用 gap 不会像 margin 那样导致父容器出现滚动条或超出边界，因为它被设计为网格系统的一部分。对比之下：
- 多个子元素使用 margin-right 和 margin-bottom，容易造成最后一列或最后一行额外留白
- gap 只作用于项目之间，不会在容器边缘产生多余空隙
因此无需再用负 margin 或 nth-child 去修正，结构更干净。
响应式布局 中的 gap 应用
gap 支持响应式单位，比如 rem、% 或 fr，可配合媒体查询动态调整：
@media (max-width: 768px) {
grid-container {
gap: 10px;
}
}
@media (min-width: 769px) {
grid-container {
gap: 20px 30px;
}
}
这样在不同屏幕尺寸下都能保持舒适的间距。
与 align-items、justify-items 的协同
gap 处理的是“项目之间的距离”，而 align-items 和 justify-items 控制项目在单元格内的对齐方式。三者互不冲突，可共同打造整齐美观的布局。
例如：
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
align-items: center;
justify-items: stretch;
即使有 gap 存在，子元素仍可在各自区域内居中或拉伸。
基本上就这些。合理使用 gap 能大幅提升 Grid 布局的可维护性和视觉一致性，建议优先取代 margin 实现间隔控制。
