gap属性可一步解决grid元素拥挤问题，它是row-gap和column-gap的简写，支持单值（如gap:12px）或双值（如gap:12px 20px）语法，比用margin更干净可控。
Grid网格布局中元素挤在一起，主要因为默认没有设置间距。用 gap 属性就能一步解决——它专门用来统一控制行与行、列与列之间的空白距离，比分别给子项加 margin 更干净、更可控。
gap 是什么？怎么写？
gap 是 row-gap 和 column-gap 的简写属性，语法简单：
-
gap: 12px;→ 行间距和列间距都是 12px -
gap: 12px 20px;→ 行间距 12px，列间距 20px（顺序：先 row 后 column） - 支持单位：px、rem、em、%（百分比基于网格容器的内联尺寸，慎用）
别再用 margin 挤占网格轨道了
很多人习惯给每个 grid 子项加 margin-right 和 margin-bottom 来模拟间距，这会导致两个问题：
- 最后一列/最后一行多出多余空白（因为 margin 不会自动消失）
- 破坏网格的轨道计算，可能让列宽变窄或触发不必要的换行
- 响应式调整时 margin 需重复设置，而 gap 只在容器上改一次就全局生效
gap 在实际项目中的小技巧
除了基础用法，这些细节能让布局更稳：
- 如果只想要行间距或列间距，直接用
row-gap或column-gap，避免误设另一方向 - gap 不影响网格线位置，它只是在轨道之间“插入空白”，所以不会改变
grid-template-columns的定义逻辑 - 在 flex 布局里也有
gap（现代浏览器基本都支持），但 Grid 中 gap 的行为更符合二维布局直觉
基本上就这些。gap 属性不复杂，但容易忽略——加一行代码，立刻告别拥挤感。
