ie11 不支持现代 css grid，必须手动重写为 -ms-grid 语法，autoprefixer v9+ 已移除相关转换，@supports 无效，gap 和 subgrid 等特性需手动模拟或放弃。
IE11 根本不解析 display: grid
IE11 不是“漏前缀”，而是压根不认识 display: grid 这个声明——整条规则被静默丢弃，连带所有 grid-template-columns、grid-column 等属性全部失效。你写的现代 Grid 代码在 IE11 里等同于没写。
-
display: grid必须显式替换成display: -ms-grid（IE11 唯一认的入口） -
grid-template-columns: 1fr 2fr要改写为-ms-grid-columns: 1fr 2fr，但注意：IE11 对fr支持不稳定，混用auto和fr易错位，建议统一用50% 50%或200px 300px -
grid-column: 1 / -1这类写法在 IE11 中直接被忽略，必须手动换算终点列索引（如总列数为 3，则写成-ms-grid-column: 1; -ms-grid-column-span: 3）
@supports (display: grid) 在 IE 中完全无效
@supports 这个 at-rule 本身就不被 IE11 解析，整段规则会被跳过，既不执行也不报错。你不能靠它给 IE 写 fallback 样式。
- 真正可用的检测方式只有 JavaScript：
'grid' in document.documentElement.style - 或用 IE 专用媒体查询：
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) - 降级样式必须写在
@supports块外层，否则 IE 和 Safari 9 之类的老浏览器根本看不到
Autoprefixer 的 grid: true 配置已失效
Autoprefixer v9（2021 年起）已主动移除对 IE Grid 的支持。即使你在 postcss.config.js 里写了 autoprefixer({ grid: true })，编译后也不会生成任何 -ms-grid- 属性。
- v8.x 版本虽保留该选项，但实测常漏定义
-ms-grid-rows、错转gap为无效margin，调试成本远高于手写 - Autoprefixer 只做前缀补全，不是语义重写器；它看到
display: -ms-grid才可能补-ms-grid-columns，看到display: grid就当现代语法处理 - 检查最终生成的 CSS 文件，搜索
-ms-grid—— 如果没出现，说明 Autoprefixer 根本没触发，问题不在配置，而在源码没满足输入条件
gap 和 subgrid 等特性必须手动模拟或放弃
grid-gap 在 IE 全系、Safari ≤14.1、Android WebView ≤76 中被完全忽略，getComputedStyle(el).gap 返回空字符串。Autoprefixer 即使开启 grid: true，也只展开为 grid-row-gap/grid-column-gap，不加 -webkit- 前缀。
- 横向间隙：用
.item { margin-right: 12px; }+.item:nth-child(3n) { margin-right: 0; } - 纵向间隙：用
.item { margin-bottom: 12px; }+.grid { margin-bottom: -12px; }（父容器负边距抵消最后一行多余间隙） -
subgrid、minmax()、auto-fit、grid-template-areas在 IE11 中全都不支持，写了等于白写
-ms-grid- 属性，IE11 运行时仍可能错位或崩溃，因为它的引擎有硬约束——-ms-grid-column-span 和 -ms-grid-row-span 只接受正整数，span 2 或 -1 会被静默忽略。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
