gap值需严格按row-gap、column-gap顺序设置，单值统一行列间距，双值首为行距次为列距；避免与row-gap/column-gap混用导致覆盖冲突。
直接改 gap 的值就行，但必须注意顺序、单位和覆盖逻辑——改错一个地方，整个网格间距就乱了。
gap 双值写法的顺序不能颠倒
写 gap: 1rem 0.5rem 时，第一个值是 row-gap（行间距），第二个才是 column-gap（列间距）。不是“列先行”，浏览器严格按规范解析。常见错误是以为 gap: 12px 24px 是“左右 12px、上下 24px”，结果行间距变成 12px，列间距反而是 24px，视觉上竖向挤、横向松。
- 只设一个值：
gap: 8px→ 行距 = 列距 = 8px - 设两个值：
gap: 0 16px→ 行间距为 0（适合单行多列布局），列间距 16px - 想微调列间距但保留原有行距？别用双值重写，单独加
column-gap: 12px更安全
别混用 gap 和 row-gap / column-gap
如果容器同时写了 gap: 10px 和 row-gap: 20px，后者会完全覆盖前者的行间距部分，但列间距仍为 10px —— 导致行列不对称，且难以调试。
- 推荐统一用
gap单点控制，避免属性打架 - 若需兼容旧版 Safari（grid-row-gap 和
grid-column-gap（已废弃但仍有支持） - 绝对不要一边写
gap，一边又用margin给子项手动加空隙——既破坏 Grid 自动分配逻辑，又让可用空间计算变复杂
gap 值类型有硬限制，calc() 和 fr 都不能直接塞进简写里
gap 只接受长度值（px、rem、%）、normal，不支持负数，也不能在简写中嵌套 calc() 或使用 fr 单位。
- ✅ 合法：
gap: calc(1rem - 4px) 8px（注意：calc 必须整体作为单个值，不能拆开写） - ❌ 非法：
gap: calc(1rem - 4px) 1fr（1fr不被允许） - ❌ 非法：
gap: -8px（负值无效，会被忽略） - 百分比值如
gap: 2%是基于容器内联尺寸（inline size）计算的，实际效果常比预期小，慎用
gap 会影响可用空间，但不触发重排——这点容易被忽略
比如 grid-template-rows: repeat(4, 1fr) 搭配 gap: 12px，实际会产生 3 个行间隙（4 行 → 3 个空隙），总占用 36px。如果你按“4 × 单行高度”去算容器高度，会少掉这部分。
- 当用
height: 100vh+grid做全屏布局时，这个偏差会让底部内容被裁切 - gap 不改变轨道定义，但会压缩每个
1fr轨道的可用空间——它是在轨道计算完之后才插入的 - 如果要首尾无 gap、中间有间隔，只能用
row-gap单独设，或改用padding+gap组合（例如容器padding: 0 10px，再gap: 0 20px）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
