ie11的-ms-grid与现代grid语法完全不兼容：列线从0开始、不支持fr/gap/grid-template-areas/span关键字，需手动拆解为-ms-grid-column/-ms-grid-column-span等属性，并用margin模拟间隙，推荐用@supports降级而非硬兼容。
IE11的-ms-grid和现代grid语法完全不兼容
别指望把现代Grid代码加个-ms-前缀就能在IE11跑通。IE11的display: -ms-grid是另一套独立语法：不支持fr、不支持grid-template-areas、不支持gap、不支持span关键字，连网格线编号都从0开始（现代Grid从1开始）。PostCSS自动加前缀插件对它完全无效——它只会把grid-column: 1 / 3机械转成-ms-grid-column: 1 / 3，而IE11根本不认这种写法。
-ms-grid-column和-ms-grid-row必须配span或具体数值
IE11里不能写grid-column: 2 / 4，得拆成两个属性，并用span或绝对位置：
-
-ms-grid-column: 2表示起始列线（注意：IE11列线从0开始计数，所以第1列是-ms-grid-column: 0） -
-ms-grid-column-span: 2表示跨2列（等效于现代grid-column: 2 / 4） - 若要跨到最后一列，不能用
-1，得手动算总列数后填数字，比如3列布局中“占满后两列”就得写-ms-grid-column: 1; -ms-grid-column-span: 2
grid-gap在IE11中彻底失效，只能用margin模拟
IE11完全不识别grid-gap、grid-row-gap、grid-column-gap，连带-ms-前缀版本也无效。常见错误是给子元素同时设margin和现代gap，结果在Chrome里空白加倍，在IE11里又没间隙。
- 统一方案：只用
margin控制间距，例如margin-right: 10px; margin-bottom: 10px - 为避免最后一列/行多出多余margin，可用
:nth-child剔除，如.item:nth-child(3n) { margin-right: 0; }（需按实际列数调整） - 别依赖
box-sizing: border-box来抵消margin——IE11对它的支持虽好，但margin本身仍会撑大容器，计算更复杂
用@supports做特性检测比强行兼容更可靠
硬写两套Grid代码维护成本极高，且极易漏掉某个属性的IE11等效写法。真实项目中更可行的做法是明确分层：
- 先写现代Grid布局，用
display: grid和fr单位 - 用
@supports (display: grid)包裹，确保仅现代浏览器执行 - IE11走降级路径：用
display: flex或float实现近似结构，而非死磕-ms-grid - 如果业务强制要求IE11必须用网格，则接受限制：放弃
fr、放弃语义化区域、手算所有行列位置，且无法响应式
真正容易被忽略的是：IE11的-ms-grid不支持隐式网格，所有子元素必须显式指定-ms-grid-column和-ms-grid-row，漏一个就会堆叠在左上角。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
