grid-column-gap 对跨列元素无效是正常行为，因其仅作用于相邻网格轨道间，而跨列元素不占据中间轨道；应使用 grid-row-gap 控制垂直间距，并通过 padding 实现左右留白。
grid-column-gap 对跨列元素不起作用是正常行为
grid-column-gap 只控制**相邻网格轨道之间**的间距，而 grid-column: 1 / -1 这类跨列元素本身不占据中间轨道，所以 gap 不会“撑开”它和旁边内容之间的距离。你看到的“间距变小”，其实是跨列项和其他项共用同一行、但未被 gap 隔开导致的视觉挤压。
用 grid-row-gap + 显式行高控制垂直节奏更可靠
跨列常用于标题、分隔线等横贯整行的元素，它们真正需要的是与上下行内容保持一致的垂直留白。此时依赖 grid-row-gap 比强行塞 grid-column-gap 更合理：
-
grid-row-gap会在跨列项所在行的上方和下方都生效（只要它独占一行） - 确保跨列项使用
grid-column: 1 / -1，且前后项没用grid-row手动挤在同一行 - 如果跨列项内容高度不固定，加
min-height或height避免因内容塌陷导致 gap 被压缩
需要“左右留白”就别用跨列，改用 padding 或 inline-grid
如果你实际想要的是跨列容器自身左右有空隙（比如居中宽条背景色块），那不是 gap 的职责，而是布局内边距问题：
- 给跨列元素加
padding-left和padding-right—— 简单直接，不影响网格结构 - 或把它包进一个
inline-grid容器，用该容器的margin控制外边距 - 避免用
margin-left/right配合justify-self: center，容易在响应式下错位
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-row-gap: 24px; /* ✅ 控制跨列项上下间距 */
}
.header {
grid-column: 1 / -1; /* ✅ 横跨全部列 */
padding: 0 16px; /* ✅ 左右内边距替代“gap” */
}Firefox 中 gap 行为差异可能加剧误解
旧版 Firefox（grid-row-gap 的渲染有轻微偏差，比如首行 gap 偏小。这不是 bug，而是其早期 track sizing 算法未完全对齐规范。解决方案很实在：
立即学习“前端免费学习笔记（深入）”；
- 升级到 Firefox 110+（当前稳定版已无此问题）
- 若必须兼容老版本，给跨列项加
margin-top补齐首行 gap - 不要尝试用
gap模拟 margin —— 语义错位，维护成本高
跨列的本质是“放弃列轨道参与”，gap 是轨道间的胶水。想让它“起作用”，等于让胶水粘住不存在的轨道。真正要调的，是跨列项自身的尺寸、位置，以及它所处的行级节奏。
