edge 12–15不支持现代css grid，因仅实现2012草案版，@supports无法检测其-ms-grid特性，必须手写-ms-grid语法、用js检测或媒体查询hack，并禁用所有现代grid特性。
老旧 Edge（12–15）不支持现代 CSS Grid，必须降级为 display: -ms-grid + 手动行列定位，且 @supports 无法检测它——它会直接跳过整个规则块。
为什么 @supports (display: grid) 在 Edge 12–15 中完全失效
Edge 12–15 认识 @supports 这个语法，但不支持 display: grid 声明本身。结果是：它解析到 @supports 时发现条件为假，就跳过整段规则，连 fallback 样式都不会应用。这不是“兼容性差”，是“根本不进分支”。
更麻烦的是：@supports (display: -ms-grid) 也无效——Edge 12–15 虽支持 -ms-grid，但不把它当作可检测的特性值。
- 唯一可靠的检测方式是 JavaScript：
'msGridColumns' in document.documentElement.style或'grid' in document.documentElement.style === false - 如果用 CSS 方案，只能靠
@media screen and (-ms-high-contrast: active)或@media all and (-ms-high-contrast: none)针对 IE/Edge 12–15 做 hack 选择器 - 别把降级样式写在
@supports块里——它必须放在外层，否则 Edge 12–15 看不见
display: -ms-grid 必须显式声明，不能依赖 Autoprefixer 自动补全
Autoprefixer v9+ 已移除对 IE/Edge Grid 的语法转换能力。它不会把 display: grid 改成 display: -ms-grid，也不会把 grid-column: 2 / 4 拆成 -ms-grid-column: 2; -ms-grid-column-span: 2。
- 源码中必须手写
display: -ms-grid，再叠一层display: grid作现代浏览器 fallback -
grid-template-columns: 1fr 2fr→ 得同步写-ms-grid-columns: 1fr 2fr；但注意 Edge 14–15 对fr支持不稳定，建议改用33.33% 66.66%或固定值如200px 400px - 每个子项必须显式设置
-ms-grid-column和-ms-grid-row，span关键字不被识别，-ms-grid-column-span: 2是唯一合法写法
Gap 在 Edge 12–15 中静默失效，margin 模拟是唯一可行方案
grid-gap、gap、-ms-grid-gap 在 Edge 12–15 全部无效，DevTools 中显示为灰色或带删除线，getComputedStyle(el).gap 返回空字符串。
- 横向间隙：给子项加
margin-right: 12px，再用.item:nth-child(3n) { margin-right: 0; }清除末尾 - 纵向间隙：子项设
margin-bottom: 12px，父容器加margin-bottom: -12px抵消最后一行多余间距 - 务必加
box-sizing: border-box到所有网格项，避免margin+padding叠加撑破容器 - 别用
padding或border模拟 gap——响应式断点切换时尺寸计算极易失控
避免在 Edge 12–15 中使用任何现代 Grid 特性
Edge 12–15 只实现 2012 年草案版 Grid，和 W3C 2017 推荐标准完全不兼容。以下写法在它里面不是“效果不好”，而是“压根不解析”：
-
grid-template-areas：会被忽略，必须拆成-ms-grid-row/-ms-grid-column手动定位 -
justify-items、align-content：无对应-ms-属性，降级用text-align: center或margin: auto -
auto-fit、minmax()：不识别，列数必须写死，比如-ms-grid-columns: 100px 100px 100px -
grid-auto-flow：无替代方案，所有格子位置都得硬编码
最常被忽略的一点：Edge 12–15 不支持 subgrid，也不支持 grid-row-start: span 2 这类隐式跨度语法——哪怕你只在现代浏览器里用，只要 CSS 文件里存在，旧版 Edge 就可能因解析错误导致整条规则失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
