直接用column-gap和row-gap即可，二者完全独立互不影响；它们仅在网格轨道间插入额外空白，不压缩列宽、不撑开行高，也不改变单元格自身尺寸。
直接用 column-gap 和 row-gap 即可，二者完全独立，互不影响。 不需要 hack、不需要 wrapper、也不用担心列宽被压缩或行高被撑开——它们只是在轨道之间“插空”，不改变任何单元格自身尺寸。
为什么 column-gap 设了值，但列看起来没变宽？
因为 column-gap 插入的是额外空白，不是从列宽里“抠”出来的。比如三列各 1fr + column-gap: 20px，总宽度 = 可用宽度 + 2 × 20px（两处间隙），列轨道本身仍是均分容器宽度。
- 列内容不会被挤压，
grid-template-columns定义的轨道宽度保持不变 - 如果容器宽度固定，加
column-gap可能导致水平滚动（尤其多列时） - 用
minmax(0, 1fr)或grid-auto-flow: column等特殊模式时，gap 行为不变，仍只作用于实际存在的列轨道间
怎样让 row-gap 生效，却看不到效果？
常见原因是网格没形成多行布局——row-gap 只在有「至少两行轨道」时才起作用。
-
grid-template-rows: 1fr（单行定义）+ 多个子项 → 子项会自动换行堆叠，此时row-gap才可见 - 只设
grid-auto-rows: 100px，但容器内只有一个 item → 没有第二行，row-gap不渲染 - 用了
grid-column: span 2跨列？不影响 gap，它始终按轨道计算，不是按单元格边缘
和 gap 简写一起用时，谁说了算？
gap 会覆盖 row-gap 和 column-gap 的值，优先级更高。共存时以 gap 为准。
-
row-gap: 12px; column-gap: 8px; gap: 10px;→ 最终是row-gap: 10px; column-gap: 10px -
gap: 10px 20px;等价于row-gap: 10px; column-gap: 20px，顺序不能颠倒 - 要兼容 Safari 15.x 及更早版本，得同时写：
row-gap: 10px; column-gap: 20px; gap: 10px 20px;（旧 Safari 不认gap）
最容易被忽略的一点：gap 是容器级属性，只作用于直接子元素之间的轨道空隙；给子元素加 margin 不仅多余，还会叠加出双倍间距——查 computed 样式就能看到 gap 值已生效，而 margin 是额外加上的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
