为什么IE 11的CSS Grid语法不生效？

IE11仅支持2012年草案版Grid，需用-ms-grid及相关属性，不支持现代Grid语法；Autoprefixer自v9起不再转换Grid；@supports在IE11中无效，降级须靠外层fallback或JS检测。

IE11 的 display: grid 语法压根不解析，不是漏前缀、不是配置错，是浏览器根本不认识这个声明——它只认 display: -ms-grid。

IE11 只支持 2012 年草案版 Grid，不是 W3C 标准版

现代 CSS Grid（2017 年推荐标准）里那些写法，比如 grid-column: 1 / -1、grid-template-areas、minmax()、gap，IE11 全部无视。它只实现了一个早期草案：必须显式定义行列、所有子项必须手动定位、不支持隐式轨道、不支持负索引或 span 关键字。

1. grid-template-columns: 1fr 2fr 得改写为 -ms-grid-columns: 1fr 2fr（但注意：IE11 对 fr 支持不稳定，混用 auto 和 fr 容易错位）
2. grid-column: 2 / 4 必须拆成 -ms-grid-column: 2; -ms-grid-column-span: 2（-ms-grid-column-span 只接受正整数）
3. justify-items: center 在 IE11 中完全无效，得靠 -ms-grid-column-align: center 或退回到 margin: auto

Autoprefixer 不会把 display: grid 自动转成 -ms-grid

很多人以为配了 autoprefixer({ grid: true }) 就万事大吉，其实 Autoprefixer 从 v9（2024 年起）就彻底移除了 Grid 语法转换能力。它只在你已经写了 display: -ms-grid 的前提下，补几个配套属性（比如 -ms-grid-columns），不会凭空生成整套 IE 逻辑。

1. 源码只写 display: grid → Autoprefixer 什么都不会输出
2. browserslist 里没显式写 ie 11（只写 last 2 versions 会被忽略）→ 插件直接跳过 IE 相关处理
3. PostCSS 插件顺序错误：如果 postcss-preset-env 在 autoprefixer 前运行，它可能把 -ms-grid 提前转成了现代语法，导致 Autoprefixer 看不到目标

@supports (display: grid) 在 IE11 中完全无用

@supports 是 CSS 原生特性检测，但 IE11 不支持该规则——它会直接跳过整个 @supports 块。所以别指望用它来包裹 Grid 代码并让 IE11 走 fallback。真正能生效的降级方式只有两种：

1. 外层写 fallback（如 float 或 inline-block），再用 @supports 包裹现代 Grid 作为增强（IE11 和 Safari 9 会忽略块内样式，只用外层）
2. 用 JS 特性检测：if ('grid' in document.documentElement.style)，然后动态加载不同 CSS 或切 class

最常被忽略的一点：即使你手写对了所有 -ms- 属性，IE11 的渲染引擎仍有硬限制——-ms-grid-column-span 必须是正整数、总列数必须预先算死、fr 单位在复杂嵌套中容易崩。这些不是配置问题，是底层引擎能力边界。