grid-gap在旧版浏览器无效 改用margin辅助布局兼容实战案例|Duuu笔记
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 这一条线就够了。
