IE11不支持现代CSS Grid，仅识别2012草案版display: -ms-grid；Autoprefixer v9+已移除IE Grid支持，需降级v8并手动书写-ms-grid属性；@supports无效，须用JS检测或IE专用媒体查询分流；Flexbox降级更可靠。
IE11 里 display: grid 完全不生效，不是写错了，是浏览器压根不认识这个声明。 它只认 2012 年草案版的 display: -ms-grid，现代 Grid 语法对它来说等于不存在。Autoprefixer 不会“自动补全”这套旧语法——它只加前缀，不改布局模型。
Autoprefixer 的 grid: true 配置在 v9+ 已失效
很多人在 postcss.config.js 里配了 autoprefixer({ grid: true })，却发现编译后没生成任何 -ms-grid- 属性。这是因为 autoprefixer v9（2021 年起）已彻底移除对 IE Grid 的支持：旧语法和现代语义差异太大，自动转换极易出错，官方选择放弃。
如果你非要用，只能降级到 v8.x，并确保：
-
browsers明确包含'IE >= 10' -
grid选项显式设为true（v8 默认是false） - 源码中必须先写
display: -ms-grid，否则 autoprefixer 不会“无中生有”补-ms-grid-columns等属性
但实际项目中，v8 生成的 -ms- 代码常漏定义行列、错位、把 gap 转成无效 margin，调试成本远高于手写。
立即学习“前端免费学习笔记（深入）”；
display: grid 必须手动重写为 display: -ms-grid
IE11 不会解析 display: grid，连带所有 grid-* 属性都会被忽略。你必须主动写两套：
- 现代部分：
display: grid+grid-template-columns+grid-area - IE11 部分：
display: -ms-grid+-ms-grid-columns+-ms-grid-rows+-ms-grid-column/-ms-grid-row
例如：grid-template-columns: 1fr 2fr 在 IE11 中要写成 -ms-grid-columns: 1fr 2fr，但注意：fr 单位本身在 IE11 中是支持的（仅限此上下文），而 minmax()、auto-fit、gap 全都不支持，得用 margin 模拟或直接放弃。
@supports (display: grid) 在 IE11 中完全不工作
@supports 这个 at-rule 本身就不被 IE11 识别，整段规则会被静默跳过。你不能靠它给 IE 写 fallback 样式。
真正能用的分流方式只有两种：
- JavaScript 检测：
'grid' in document.documentElement.style，然后动态加类名（如data-grid-supported） - IE 专用媒体查询：
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)，这是目前最稳妥的纯 CSS 方案
别在同一个选择器里混写 display: grid 和 display: flex——IE 会丢弃不认识的声明，但保留它能解析的部分，容易导致布局意外错乱。
用 Flexbox 降级比硬套 -ms-grid 更可靠
IE10/11 的 -ms-grid 实现极不稳定：对齐属性（如 -ms-grid-row-align）支持差，grid-area 复杂映射易出错，且无法响应式重排。
相比之下，Flexbox 虽也有缺陷（比如 flex-wrap: wrap 在某些 flex-basis 组合下失效），但至少能跑通基本流式布局：
- 用
display: -ms-flexbox+display: flex开启双引擎 - 避免
flex: 1，改用明确的flex: 0 0 300px防止 IE11 解析歧义 - 放弃
gap，用margin控制间距（注意负 margin 清除问题）
复杂网格结构建议直接降级为线性堆叠或两栏浮动——只要控制好 width 和 float，在 IE8+ 都比折腾 -ms-grid 稳定得多。
最容易被忽略的一点：即使你写了完整的 -ms-grid 声明，IE11 也不支持 grid-template-areas 这种抽象区域定义，所有子项都得手动算线号、写 -ms-grid-column 和 -ms-grid-row。这不是配置问题，是规范断层——别指望工具链替你跨过去。
