grid-gap（gap）不能设置不同轨道间距，因为它只支持统一值或行/列双值，不支持轨道级差异化；替代方案包括用空网格项模拟、margin伪造、嵌套容器隔离。
grid-gap 为什么不能设置不同轨道间距
grid-gap（或 gap）是简写属性，它统一控制行与行、列与列之间的**等距间隙**。CSS 规范里没有“第1行和第2行之间 16px、第2行和第3行之间 8px”这种能力——gap 只接受一个值（全局）、两个值（row-gap column-gap），不支持数组、函数或轨道级表达式。
常见错误现象：写了 gap: 16px 8px, 8px 4px 或尝试用 grid-template-rows: 100px 16px 200px 8px 150px 混入间隙值，结果无效或布局错乱。
本质原因：轨道定义（grid-template-rows/grid-template-columns）描述的是**轨道尺寸**，不是间隙；而间隙是轨道之间的独立区域，由 gap 统一管理，不可拆分。
用 grid-row/column-start/end + 空单元格模拟不等距间隙
这是最可控、兼容性好（IE11+ 也适用）、语义清晰的替代法：把“间隙”当成一个**显式定义的空网格项**，用 grid-row 和 grid-column 定位它，再设高度/宽度和背景（通常透明）。
立即学习“前端免费学习笔记（深入）”；
- 适用场景：需要精确控制某两行之间 24px、另两行之间 0、某两列之间 32px 的排版，比如仪表盘卡片分组、表单节区隔断
- 关键点：空单元格必须有明确的
grid-row和grid-column，不能依赖自动定位；否则可能被压缩或重叠 - 性能影响极小：只是一个空
<div>，无内容、无渲染负担<p>示例：<pre class='brush:php;toolbar:false;'>.grid { display: grid; grid-template-columns: 1fr 1fr; } .spacer-row { grid-column: 1 / -1; /* 横跨全部列 */ height: 24px; } .item-a { grid-row: 1; } .item-b { grid-row: 2; } .spacer-row { grid-row: 3; } .item-c { grid-row: 4; }</pre></p> <h3>用 margin 在网格项上“伪造”不等距间隙</h3> <p>当网格项自身可控制外边距时，<code>margin-bottom或margin-right能实现视觉上的不等距分隔，但要注意网格容器的overflow和对齐行为。- 容易踩的坑：
margin会扩大网格项尺寸，若容器设了grid-auto-rows: minmax(100px, auto)，可能导致高度意外拉伸 - 兼容性好，但需配合
box-sizing: border-box避免尺寸计算混乱 - 不适用于
grid-template-areas场景——因为区域名无法表达“某项多占一行再留空” - 若使用
justify-items: stretch（默认），横向margin对齐可能偏移，建议改用justify-self显式控制
示例：
.item:first-child { margin-bottom: 32px; } .item:nth-child(2) { margin-bottom: 8px; } .item:last-child { margin-bottom: 0; }用嵌套 Grid 或 flex 容器隔离不同间隙需求
如果整个网格中只有局部区域（如右侧栏、底部区块）需要特殊间距，比全局 hack 更干净的做法是：让主 Grid 只负责大块分区，再在子容器内部用另一层 Grid/flex 处理细节间距。
- 典型场景：左侧导航固定宽 + 右侧内容区，内容区内部卡片需上下 12px、左右 8px，但导航与内容之间要 40px
- 优势：逻辑解耦，样式职责单一，后续修改不影响其他区域
- 注意点：嵌套层级加深后，
grid-area名称作用域不变，但gap不会穿透，子容器的gap只作用于其直系子项
复杂点在于，你得判断清楚：那个“不同间距”到底是视觉节奏问题，还是真实的信息分组边界——前者适合
margin，后者更适合空单元格或嵌套。 - 容易踩的坑：
