ie11的-ms-grid是微软旧草案实现，与标准display: grid完全不兼容；需用-ms-前缀属性、固定单位（禁用fr/minmax/repeat）、显式声明-column-span/-row-span，且@supports无法检测。
IE11 的 -ms-grid 声明根本不是 Grid Level 1 标准
IE10–IE11 实现的是微软提交给 W3C 的旧草案（2011 年版），和现在 display: grid 完全不兼容。它用的是 display: -ms-grid，所有属性都带 -ms- 前缀，且语法结构完全不同：没有 grid-template-areas，不能用 fr 单位，grid-column 必须写成 -ms-grid-column，连起始/结束位置都要拆成两个独立属性。
-ms-grid-column 和 -ms-grid-row 的写法必须配对
IE11 不支持 grid-column: 1 / 3 这种简写，必须显式声明起点和跨度：
-
-ms-grid-column: 2表示从第 2 列线开始（注意：列线编号从 1 开始） -
-ms-grid-column-span: 2表示横跨 2 列轨道（不是列线） -
-ms-grid-row: 1+-ms-grid-row-span: 3同理，用于控制行方向 - 漏掉
-ms-grid-column-span就默认只占 1 轨道，极易导致子项堆叠在左上角
IE11 的 -ms-grid-template-columns 必须用固定值或 auto
IE11 完全不识别 minmax()、fit-content()、fr 或任何函数式单位。能用的只有：
-
auto（内容宽度） -
px、em、%（但 % 在嵌套容器中行为不稳定） -
1fr？不行，会直接被忽略 → 写了等于没写 -
repeat(3, 200px)？不支持，必须手写200px 200px 200px
如果需要响应式，只能靠 media query 配合多套 -ms-grid-template-columns 声明，无法用现代 Grid 的自动断点能力。
@supports 根本检测不到 -ms-grid，别白费力气
@supports (display: -ms-grid) 在 IE11 中无效——整个 @supports 规则块会被浏览器静默跳过。更糟的是，Chrome/Firefox/Safari 会把 -ms-grid 当作非法值，直接拒绝解析整条规则。
正确做法是用条件注释（仅限 IE）或 JS UA 检测：
- 服务端渲染时，用
<!--[if IE]><link rel="stylesheet" href="ie-grid.css"><![endif]--> - 前端运行时，用
if (navigator.userAgent.indexOf('MSIE') > -1 || !!document.documentMode)加载降级样式 - 千万别把
-ms-grid和标准grid写在同一选择器里，IE11 会因解析失败丢弃整条 CSS 声明
最易被忽略的一点：IE11 的 -ms-grid 不支持隐式网格，所有轨道必须在容器上预先定义；子项超出定义范围的部分，会被裁剪或错位，且无任何警告。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
