grid-gap 在 ie 和旧版 safari 中无效，需用 grid-row-gap 和 grid-column-gap 替代；autoprefixer 需配置 grid: true 且源码写 gap 才能自动补全；兼容方案首选 margin + box-sizing。
grid-gap 在 IE 和旧版 Safari 里根本不会生效
因为 grid-gap 是 CSS Grid Level 1 规范中定义的属性，IE 完全不支持 Grid，而 Safari ≤ 10.1、Chrome ≤ 56、Firefox ≤ 51 等旧引擎只认 grid-row-gap 和 grid-column-gap，直接写 grid-gap 就等于没写。
常见错误现象：grid-gap: 12px 在本地开发看着好好的，一发到测试环境（老 iPad 或内嵌 WebView）就贴死，格子挤成一团。
- 必须拆成两个独立属性：用
grid-row-gap和grid-column-gap替代grid-gap - 如果只设单方向间距，比如只要行间距，就只写
grid-row-gap，别依赖grid-gap的简写逻辑 - 注意 Safari 10.1 有个坑：它支持
grid-row-gap，但不支持gap（Level 2 新增的通用属性），所以别提前切到gap
用 margin 模拟 gap 时，子元素必须显式设置 box-sizing
靠给 grid item 加 margin 来“假装”有间隙，是兼容性最强的 fallback 方案，但默认情况下 margin 会撑大容器尺寸，导致换行错乱或滚动条意外出现。
使用场景：需要支持 IE11 或 Android 4.4 内置浏览器这类完全无 Grid 支持的环境。
- 所有 grid item 必须加
box-sizing: border-box，否则 margin 会让实际宽度超过 100% - 横向间隙用
margin-right，最后一列要清除；纵向用margin-bottom，最后一行同理 —— 建议用:nth-child或伪类清除，别手动加 class - 如果容器用了
overflow: hidden，负 margin 的父容器 hack（如margin: -12px）可能触发渲染 bug，优先选子项正向 margin + 清除
autoprefixer 并不能自动补全 grid-gap
很多人以为开了 autoprefixer 就万事大吉，结果打包后还是不兼容。因为 autoprefixer 对 Grid 的处理非常保守：它只补 display: -ms-grid 这类 IE 专用声明，对 grid-gap → grid-row-gap 这种属性级转换默认不处理。
性能影响不大，但配置错了就白忙活。
- 必须在
postcss.config.js中显式启用 Grid 支持：grid: true（注意不是grid: "autoplace"） - 即便开了
grid: true，autoprefixer 也只转gap（Level 2）为grid-row-gap/grid-column-gap，不转grid-gap—— 所以源码里就得直接写gap，而不是grid-gap - 写
gap: 12px+grid: true，autoprefixer 才会输出三行：gap: 12px、grid-row-gap: 12px、grid-column-gap: 12px
Flexbox fallback 比想象中更难对齐
有人想“干脆整个降级成 flex”，但 flex-wrap 配合 justify-content 很难复现 grid 的二维间隙控制，尤其当行数动态、item 宽度不均时，margin 方案反而更可控。
容易踩的坑：
- flex 容器设
justify-content: space-between后，每行首尾 item 会贴边，和 grid 的均匀 gap 表现不一致 - 用
margin做 flex 间隙时，换行后的第一项会多出上边距，需配合flex-flow: row wrap+:nth-child清除 - 如果原 grid 布局用了
grid-template-areas，flex 根本没法等价降级，这时候硬切 flex 不如老老实实用 margin + grid 回退
真正麻烦的不是怎么写兼容代码，而是得同时维护两套布局逻辑，并在媒体查询或 JS 检测里做切换 —— 大多数项目其实只需要守住 grid-row-gap / grid-column-gap + margin fallback 这一条线就够了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
