ie11 不支持 display: grid，需手动写 display: -ms-grid；autoprefixer 不转换 grid 语法，仅补全已有 -ms-grid 属性；其 grid 基于2012草案，fr 单位受限、无隐式轨道、不支持 gap 等现代特性，且 @supports (display: grid) 在 ie11 中无效。
IE11 里 display: grid 根本不被识别，不是“样式没生效”，而是浏览器直接跳过整条声明——你必须手动写 display: -ms-grid，Autoprefixer 才有输入可处理。
IE11 的 display: -ms-grid 不是前缀，是另一套语法
Autoprefixer 不会把 display: grid “翻译”成 display: -ms-grid。它只在你已写了 display: -ms-grid 的前提下，补全配套的 -ms-grid-columns、-ms-grid-row 等属性。IE11 的 Grid 基于 2012 年草案，和现代标准互不兼容：
-
grid-template-areas、grid-gap、minmax()、repeat()全部无效 -
fr单位只能用于-ms-grid-columns和-ms-grid-rows，且不能混用auto或百分比 -
grid-column: 1 / -1或span 3不会生成任何-ms-属性，必须换算为具体起止线（如1 / 4）
autoprefixer({ grid: true }) 在 v10+ 已失效
2025 年起，Autoprefixer 主动移除了对 IE Grid 的转换能力。即使你在 postcss.config.js 里配了 grid: true，也不会输出任何 -ms-grid- 相关代码。验证方法很简单：
- 检查编译后 CSS 文件，搜索
-ms-grid-—— 如果一个都没有，说明插件没起作用 - 确认
caniuse-lite是最新版，旧数据会让 Autoprefixer 误判支持范围 -
browserslist里写ie 11只影响其他前缀，不触发 Grid 语法映射
@supports (display: grid) 在 IE11 中完全无意义
这个特性查询本身就不被 IE11 支持，所以用它包裹 Grid 代码，结果是 IE11 直接跳过整块样式，既不执行也不报错。你以为做了降级，其实 fallback 根本没机会加载。
- 别用
@supports控制 IE11 的布局分支 - 真要分流，得靠 JS 检测
getComputedStyle(el).display === 'grid'，或服务端 UA 判断 - 更实际的做法：用两个独立 class，比如
.grid-layout和.ms-grid-layout，再用条件 class 渲染
最易被忽略的一点：IE11 的 -ms-grid 是静态网格，没有隐式轨道、没有自动放置、不支持 grid-auto-flow。你写的每一列、每一行、每一个子项的位置，都得手写死——哪怕只是加个 gap，也得靠 margin 模拟，且必须配合 box-sizing: border-box，否则尺寸就乱了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
