IE11完全不支持现代CSS Grid，因其仅识别2012年草案的-ms-grid语法，display: grid等声明被静默丢弃；Autoprefixer v9+已移除Grid降级支持，@supports亦无效，可靠方案是JS检测后用条件类名分别编写布局。
IE11根本不解析display: grid，不是漏前缀，是语法不识别
IE11 对 CSS Grid 的支持停留在 2012 年草案阶段，它压根不认识 display: grid 这个声明——整条规则被浏览器静默丢弃，连带所有 grid-template-columns、grid-column 等属性一并失效。这不是“加个前缀就能好”的问题，而是两套完全不同的布局模型：-ms-grid 是静态行列定义，现代 Grid 是动态自动定位。Autoprefixer 从 v9 开始就不再尝试跨模型转换，它只做前缀补全，不做语义重写。
grid-column: 1 / -1 在 IE11 中直接被忽略，必须手动换算成正整数
IE11 的 -ms-grid-column-span 只接受正整数，不支持负索引、span 关键字或隐式轨道计算。写 grid-column: 1 / -1 或 grid-column: span 3，Autoprefixer 会跳过整条规则，不生成任何 -ms- 属性，结果元素默认落在第 1 列第 1 行，布局全乱。
- 若
-ms-grid-columns: 1fr 2fr 1fr（共 3 列），要横跨全部列 → 必须写grid-column: 1 / 4 -
grid-area无法映射，必须拆解为grid-row-start+grid-column-start+ 对应的-ms-单侧属性 -
minmax()、auto-fit、grid-gap在 IE11 中完全无效，连@supports (display: grid)都不会被解析
Autoprefixer 的 grid: true 在 v9+ 已彻底移除，配置了也白配
很多人在 postcss.config.js 里写了 autoprefixer({ grid: true })，却发现编译后 CSS 里一个 -ms- 属性都没有。这是因为 Autoprefixer 自 v9（2021 年起）已主动移除对 IE Grid 的支持——官方认为自动降级风险太高，容易产出错位、漏定义、跨度错误的代码。即使你降级到 v8.x，实测也常漏 -ms-grid-rows、把 gap 错转成无效 margin，调试成本远高于手写两套样式。
没有真正的“自动 fallback”，@supports 在 IE11 中静默失效
@supports (display: grid) 这个规则本身就不被 IE11 识别，整块 CSS 被跳过，根本不会执行 fallback 分支。你不能靠它给 IE 写降级样式；也不能依赖 css-grid-polyfill——它靠 JS 动态重排 DOM，滚动卡顿、表单失焦、动画撕裂，且早已停更。真实项目里最可靠的做法，是用条件类名（如 .ie11）或 JS 检测，外层写线性布局（flex 或 block），内层再用 @supports 包裹 Grid 样式供现代浏览器使用。
立即学习“前端免费学习笔记（深入）”；
