旧版 Edge（≤17）完全不支持现代 CSS Grid，仅识别 -ms-grid 语法且兼容性极差；autoprefixer 无法全自动补全，@supports 检测无效；可靠降级方案仅有 flex 或 block/float 布局。
旧版 Edge（≤17）根本不认 display: grid
Edge 12–17 基于 EdgeHTML 引擎，只支持 2014 年草案版 Grid，也就是 display: -ms-grid 这套语法。它和现代标准完全不兼容：不认识 grid-template-areas、gap、fr 单位，甚至 grid-column: 1 / -1 这种写法都会被忽略。你写的 display: grid 在它眼里就是无效声明，直接跳过——不是“没效果”，是压根不解析。
autoprefixer 不会自动补全 -ms-grid 的全部逻辑
很多人配了 autoprefixer({ grid: true }) 就以为万事大吉，结果 IE/旧 Edge 里布局还是错的。原因很实在：
-
autoprefixer只转有限子集：比如grid-column: 1 / 3→-ms-grid-column: 1; -ms-grid-column-span: 2，但遇到1 / -1或span 3就直接放弃 - 它不处理
grid-gap，也不把grid-template-columns: 1fr 2fr转成-ms-grid-columns: 1fr 2fr（除非你源码里就写了1fr 2fr，且没混用minmax()或auto-fit） -
@supports (display: grid)在旧 Edge 和 IE11 中完全无效，检测块会被整个跳过，所以降级样式必须独立存在、语法合法
手动写 -ms-grid 时最常踩的三个坑
就算你决定手写兼容代码，也得避开这几个硬伤：
-
-ms-grid-column-span只接受正整数，不支持负值或关键字；grid-column: 1 / -1必须换算成具体列数，比如总 4 列就写-ms-grid-column: 1; -ms-grid-column-span: 4 -
-ms-grid不支持自动定位，grid-auto-flow无效，每个子项都得显式写-ms-grid-row和-ms-grid-column -
gap完全不存在，也不能靠margin简单模拟——因为-ms-grid是严格行列对齐，margin会破坏轨道尺寸，必须用padding+box-sizing: border-box配合容器内边距来留空
真正能跑通的降级路径只有两条
别指望一个工具链全自动搞定。现实里靠谱的做法就两种：
- 用
@supports包裹现代 Grid，外部写一套display: flex（注意 IE10 需display: -ms-flexbox，且不支持flex: 1缩写） - 彻底放弃 Grid 语义，对旧 Edge/IE11 单独提供
display: block+float或inline-block布局，用媒体查询或 UA 检测加载
关键是：不要在同一个选择器里混写 display: grid 和 display: -ms-grid，旧引擎会忽略后者；也不要依赖任何 polyfill——css-grid-polyfill 已停更，性能差，且无法处理复杂嵌套。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
