grid-gap仅对display: grid/inline-grid容器生效，加在子元素或非Grid父容器上无效；旧版grid-gap已废弃，推荐用gap、row-gap、column-gap；IE完全不支持，无可靠兼容方案。
grid-gap 被忽略的真正原因：它只对 grid 容器生效
很多人写 grid-gap: 10px 没效果，不是语法错，而是加在了子元素上，或者父容器根本没设 display: grid。这个属性只作用于设置了 display: grid 或 display: inline-grid 的直接容器，对 flex、block 或后代元素完全无效。
常见错误现象：
– 网格项之间没间距，检查父元素是否漏了 display: grid
– 在子元素上写 grid-gap，浏览器直接忽略（无报错）
– 用在 display: subgrid 容器上，部分浏览器不支持（Chrome 117+ 开始支持，Firefox 仍有限制）
使用场景：
– 布局卡片列表、表单字段组、响应式图库
– 替代手动给每个项加 margin，避免最后一行/列多出空白
gap、row-gap、column-gap 三者怎么选
CSS Grid 中 gap 是简写，等价于同时设置 row-gap 和 column-gap。但它们行为有关键差异：
-
gap: 10px 20px→ 行间距 10px，列间距 20px；gap: 10px→ 行列都为 10px -
row-gap和column-gap可单独覆盖，比如gap: 10px; row-gap: 0;会让行间距归零，列保持 10px - Flex 布局也支持
gap（现代浏览器），但row-gap/column-gap在 Flex 中仅部分生效（Safari 14.1+、Chrome 104+ 支持） - 旧版写法
grid-gap已废弃，虽然目前仍兼容，但不要新项目里用
间距单位选 px 还是 rem？注意缩放和可访问性
用 px 最直观，但会破坏用户系统缩放或强制字体大小设置；用 rem 或 em 更友好，前提是根字号没被重置乱。
性能与兼容性影响：
– 所有单位（px、rem、%、fr）对渲染性能无差别
– % 在 gap 中不推荐：它基于网格容器内联尺寸计算，容易导致意外压缩或溢出
– fr 单位不能用于 gap，会直接失效（浏览器忽略该声明）
实操建议：
– 默认用 rem（如 gap: 1rem），配合 html { font-size: 16px } 基准
– 高对比度模式下，某些系统会放大 rem，这是预期行为，别强行 fix
– 不要混用单位写 gap: 10px 1rem，虽语法合法，但可维护性差，易出视觉偏差
IE 兼容问题：没有兜底方案，只能放弃或换思路
IE11 及更早版本完全不支持 gap（也不支持 grid-gap）。如果你必须兼容 IE，别试图用 JS 补丁模拟——布局错位、重排频繁、滚动卡顿会立刻暴露。
可行路径：
– 用 margin + :nth-child 清除边缘（复杂且脆弱）
– 改用 float 或 inline-block + 负 margin（维护成本高）
– 直接降级为单列流式布局（最稳妥）
重点提醒：
– @supports (gap: 10px) 可以检测，但 IE 无视整个 @supports 块，所以不能靠它“渐进增强”
– Autoprefixer 不会为 gap 加前缀，写了也白写
– 如果项目已用 display: grid，又必须支持 IE，实际等于放弃 Grid 布局本身
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
