gap是Grid容器属性，用于设置行列间距，不支持百分比，不影响轨道尺寸计算，IE完全不支持，subgrid中目前无效。
gap属性在grid布局中直接控制行列间距
用 gap 就能同时设置行与列之间的空隙，不用再分别写 row-gap 和 column-gap —— 浏览器支持足够好（Chrome 66+、Firefox 63+、Safari 14.1+），现代项目里直接上 gap 是更简洁的选择。
常见错误是把它当成 margin 用：比如给网格项自己加 margin 来“模拟”间距，结果导致对齐错乱、响应式失效，或者和 justify-items 冲突。其实 gap 是容器属性，只作用于网格线之间，不影响子项自身尺寸或定位逻辑。
-
gap值可以是单值（如gap: 1rem），此时行列间距相等 - 也可以是双值（如
gap: 1rem 2rem），前者是row-gap，后者是column-gap - 不支持百分比值（
gap: 5%无效），但支持em、rem、px、vh等常规单位 - 如果同时声明了
gap和单独的row-gap或column-gap，后者会覆盖前者对应方向的值
gap与grid-template-rows/cols共存时的计算逻辑
很多人以为 gap 会“挤占”网格轨道尺寸，其实不会：gap 是额外插入的空白，不参与 grid-template-rows 或 grid-template-columns 的数值计算。比如 grid-template-rows: 100px 200px + gap: 10px，最终容器高度是 100 + 10 + 200 = 310px，不是把 10px 从某一行里扣出来。
容易踩的坑是嵌套网格场景：外层设了 gap，内层也设了 gap，但没注意父容器是否设置了 overflow: hidden，导致内层网格的 gap 溢出不可见；或者用 fr 单位时误判剩余空间分配——gap 占用的空间不计入 fr 分配基数。
立即学习“前端免费学习笔记（深入）”；
- 当使用
repeat(auto-fit, minmax(200px, 1fr)))时，gap会作用于每个生成的列之间，但不会影响minmax()的最小宽度判定 -
gap不会影响grid-auto-rows的默认行高计算，它只是“贴在后面”的间隔 - 如果某行内容高度超过设定的
grid-template-rows值，gap仍保持原样，不会被撑大
IE不支持gap，降级方案要避开flex fallback陷阱
IE10/11 完全不识别 gap（连 row-gap / column-gap 都不行），所以不能靠 CSS @supports 包裹来渐进增强——IE 直接忽略整个规则块。必须用独立声明 + 回退机制。
常见错误是试图用 flex 布局模拟 grid gap：比如给 flex 容器设 margin，再给子项设负 margin 抵消首尾空隙。这在响应式下极易崩，尤其遇到换行、内容高度不一致时，间隙错位严重。
- 稳妥做法是：先写 IE 友好的 grid（用
display: -ms-grid+-ms-grid-columns等），再用@supports (display: grid)覆盖现代写法，里面包含gap - 如果放弃 IE，就别写任何兼容性 hack，现代项目里
gap可以放心用 - 不要用 JS 动态计算并注入 margin——性能差、SSR 不友好、CSS-in-JS 工具链可能无法提取该样式
gap在subgrid中是否生效？目前基本无效
Subgrid（通过 grid-template-rows: subgrid）能让子网格复用父网格轨道，但目前所有浏览器（截至 Chrome 125、Firefox 126）都不支持在 subgrid 容器上设置 gap。你写了也没效果，控制台也不会报错，就是静默忽略。
这意味着：如果需要在嵌套网格间保持统一间距，不能依赖 subgrid + gap 组合。得退回到传统嵌套 grid，手动为每一层设置 gap，或用 padding + border-box 控制视觉节奏。
- Subgrid 本身还在实验阶段，
gap支持尚未进入规范草案正文 - 即使未来支持，
gap在 subgrid 中的行为也和普通 grid 不同——它可能只作用于“新增的”子轨道之间，而非继承父轨道间隙 - 当前最稳的替代：用
padding统一网格项内边距，配合box-sizing: border-box，视觉上接近 gap 效果
