在 CSS Grid 布局中，column-gap 和 row-gap 用于控制网格元素之间的间距，但它们作用的方向不同。理解两者的区别有助于更精准地控制布局外观。
column-gap：控制列之间的水平间距
column-gap 设置的是网格中相邻列之间的水平空白距离。它不会影响第一列左侧或最后一列右侧的外边距，只作用于列与列的中间区域。
例如，一个三列的网格布局，使用
column-gap: 20px;，会在第1列和第2列之间、第2列和第3列之间各添加 20px 的空白。 常见用法：
grid-column-gap: 10px;
（旧语法）column-gap: 10px;
（现代推荐写法）- 可用于 flex 布局，但在 grid 中更常见
row-gap：控制行之间的垂直间距
row-gap 设置的是网格中相邻行之间的垂直间隔。它出现在每一行的下方（除了最后一行），用来分隔上下两个网格行。
立即学习“前端免费学习笔记（深入）”；
比如，有四行内容，设置
row-gap: 15px;，则在每两行之间插入 15px 的空隙。 示例场景：
- 表单布局中避免输入框贴得太近
- 卡片列表希望上下留白一致时使用
- 响应式设计中配合 auto-rows 调整视觉节奏
同时使用 column-gap 和 row-gap
可以单独设置其中一个，也可以同时定义两者。还可用简写属性 gap 来合并书写。
gap: 10px 20px;
→ 分别表示 row-gap 为 10px，column-gap 为 20pxgap: 15px;
→ 行和列的间距都设为 15px
注意：gap 不会影响网格容器的外边缘，也不会被 margin 或 padding 替代。
基本上就这些。掌握 column-gap 和 row-gap 的方向性差异，能让你在构建复杂网格时更得心应手。
