CSS Grid 中通过 column-gap、row-gap 和 gap 属性控制网格间距：column-gap 设置列间水平间距，row-gap 设置行间垂直间距，gap 可同时定义两者，支持单值（统一间距）或双值（垂直和水平）。
在使用 CSS Grid 布局时，控制网格项之间的间距非常关键。CSS 提供了三个属性来精确管理这些间距：column-gap、row-gap 和 gap。它们让布局更清晰、更易维护。
column-gap：控制列之间的水平间距
column-gap 用于设置网格中相邻列之间的水平间距。这个属性只影响列轴（inline axis）方向上的空隙。
示例：
display: grid;
grid-template-columns: 1fr 1fr 1fr;
column-gap: 20px;
上述代码会创建三列等宽的网格，每列之间有 20px 的水平间距。注意：第一列前和最后一列后不会增加额外间距。
row-gap：控制行之间的垂直间距
row-gap 用于设置网格中相邻行之间的垂直间距。它作用于行轴（block axis）方向。
立即学习“前端免费学习笔记（深入）”；
示例：
display: grid;
grid-template-rows: 100px 100px;
row-gap: 15px;
这会创建两行，每行高 100px，中间有 15px 的垂直间隔。
gap：row-gap 与 column-gap 的简写形式
gap 是 row-gap 和 column-gap 的简写属性。它可以接收一个或两个值：
- 一个值：同时设置行和列的间距
- 两个值：第一个是 row-gap，第二个是 column-gap
gap: 10px; /* 行和列间距都是 10px */
gap: 10px 20px; /* 垂直间距 10px，水平间距 20px */
使用 gap 能让代码更简洁，推荐在同时设置行列间距时优先使用。
基本上就这些。column-gap、row-gap 和 gap 是现代 CSS Grid 中控制间距的核心工具，语法简单且兼容性良好，合理使用能让网格布局更加美观和响应灵活。
