IE11不支持display: grid，必须用display: -ms-grid并前置，配合-ms-grid-columns等私有属性手动定位；@supports无效，fallback需写在外层；gap需用margin模拟，Autoprefixer v9+已停止生成-ms-grid。
IE11根本不认display: grid，必须手写-ms-grid
IE11 不是“漏前缀”，而是整条 display: grid 规则被静默丢弃——连带所有 grid-template-columns、grid-column 都失效。你写的现代 Grid 代码在 IE11 里等于没写。
必须显式声明：display: -ms-grid 作为 IE11 唯一入口，并且它得写在 display: grid **前面**，否则 IE11 直接跳过私有声明。
-
grid-template-columns: 1fr 2fr 1fr→ 改为-ms-grid-columns: 1fr 2fr 1fr（但注意：IE11 对fr支持不稳定，混用auto和fr易错位；生产环境建议用50% 50%或200px 300px） -
grid-column: 1 / -1→ IE11 完全忽略，必须拆成-ms-grid-column: 1+-ms-grid-column-span: 3（总列数为 3 时） - 子项必须**每个都手动定位**，IE11 没有隐式轨道、不支持
grid-area名称或负索引
@supports 在 IE 中完全无效，降级样式必须写在外层
@supports (display: grid) 这个规则本身就不被 IE11 解析，整段会被跳过，既不执行也不报错。你不能靠它给 IE 写 fallback。
真正能生效的写法是：把兼容 IE 的样式（比如 display: -ms-grid + float + margin）直接写在 @supports 块**外面**；现代 Grid 样式包在里面。
立即学习“前端免费学习笔记（深入）”；
- 错误示例：
@supports (display: grid) { .grid { display: grid; } } .grid { display: -ms-grid; }→ IE11 看不到.grid外层规则？不，它能看到，但如果你外层用了gap或grid-column: span 2这类它不认识的语法，照样失效 - 正确结构：外层用 IE 可解析的语法（
display: -ms-grid、float、margin），内层@supports里只放现代 Grid 声明 - 检测推荐用
@supports (display: grid) and (grid-template-columns: 1fr)，比单测display: grid更准，能筛掉 Safari 10.1 这类“半支持”环境
gap 在 IE 全系和旧 Safari 中被直接丢弃，只能用margin模拟
gap 是 Level 2 属性，IE 全系、Safari ≤14.0、Android WebView ≤75 等浏览器压根不解析它——DevTools 里显示为灰色或删除线，getComputedStyle(el).gap 返回空字符串。
grid-row-gap 和 grid-column-gap 是 Level 1 属性，兼容性好些，但 IE11 连这两个都不支持，所以最终 fallback 只能靠 margin。
- 所有 grid item 必须加
box-sizing: border-box，否则margin-right会让实际宽度超 100%，导致换行或滚动条 - 横向间隙用
margin-right，但最后一列要清除：.item:nth-child(3n) { margin-right: 0; }（假设每行 3 列） -
grid-template-columns别写死像素（如500px 500px），否则 gap 没空间可分配；改用1fr 1fr或minmax(0, 1fr) 1fr给 margin 留出生效余地
Autoprefixer v9+ 已彻底移除-ms-grid转换能力
即使你在 postcss.config.js 里写了 autoprefixer({ grid: true })，v9 及之后版本也不会生成任何 -ms- 属性。它从 2021 年起就主动放弃这事了。
v8.x 版本虽保留该选项，但实测常漏定义、错转为无效 margin，调试成本远高于手写。Autoprefixer 只做前缀补全，不是语义重写器——它看到 display: -ms-grid 才可能补 -ms-grid-columns，看到 display: grid 就当现代语法处理。
- 检查最终生成的 CSS 文件，搜索
-ms-grid—— 如果没出现，说明 Autoprefixer 根本没触发，问题不在配置，而在源码没满足它的输入条件 - 别信“配了
grid: true就自动兼容”的说法，那是过时认知 - 如果项目仍需支持 IE11，建议把
-ms-grid逻辑单独维护，或用postcss-grid-kiss（但注意：它的@supportsfallback 在 IE 中同样被忽略，需配合 JS 检测）
-ms-grid 引擎有硬约束：它不支持动态计算、不兼容 fr 混合单位、无法响应式重排，所有行列索引都得手动换算。一旦网格结构稍复杂，错一位就全乱。 
