html grid 会显著削弱 ie 支持，ie10 完全不支持，ie11 仅支持2011年旧草案的-ms-grid语法，现代grid语法（如display: grid、grid-gap、grid-template-areas）被直接忽略或导致布局错乱，无法与-ms-grid兼容混用。
HTML Grid 会显著削弱 IE 支持，不是“影响不大”，而是直接导致 IE10/IE11 布局错乱或完全失效 —— 因为现代 grid 语法和 IE 的 -ms-grid 是两套不兼容的体系。
IE11 只认 -ms-grid，不解析标准 display: grid
IE11 实现的是 2011 年旧草案（TR/2011/WD-css3-grid-layout-20110407），它只识别带 -ms- 前缀的属性，比如 display: -ms-grid、-ms-grid-columns、-ms-grid-rows。一旦你写 display: grid，IE11 就当没看见，退化为 display: block，整行堆叠。
- 现代写法：
grid-template-columns: 1fr 2fr→ IE11 完全忽略 - IE11 写法：
-ms-grid-columns: 1fr 2fr→ 仅此生效，且不能混用grid-column等新属性 -
grid-area、grid-gap、gap在 IE 中全部无效，必须用-ms-grid-row/-ms-grid-column手动定位每个子项
Autoprefixer 生成的 -ms-grid 不等于“自动兼容”
Autoprefixer 能把部分现代语法转成 -ms- 形式，但仅限于基础映射（如 grid-template-columns → -ms-grid-columns），它无法处理语义差异：
-
grid-gap没有对应-ms-属性，只能靠margin模拟 -
grid-auto-flow: dense在 IE 中无等效行为，布局可能漏项 - 嵌套
grid或响应式grid-template-areas变更，Autoprefixer 不生成任何回退代码 - 开启
grid: true选项后，Autoprefixer 仍不会补全-ms-grid-row/-ms-grid-column到每个子元素 —— 这一步必须手写
用 @supports 降级比强行兼容更可靠
试图让同一套 CSS 同时跑通 Chrome 和 IE11，往往导致样式冲突或维护地狱。更实际的做法是分层供应：
- 先写 Flexbox 回退：
.container { display: flex; flex-wrap: wrap; } - 再用
@supports (display: grid)包裹真正的 Grid 布局，IE11 因不支持该特性查询而跳过 - 对 IE10/11 单独加载一个
ie-grid.css，里面只用-ms-grid+ 绝对定位补丁 - 避免在同一个选择器里写
display: -ms-grid; display: grid—— IE11 会应用前者，但后续grid-column规则仍会解析并报错（DevTools 控制台可见Invalid property value）
IE10 根本不支持任何 Grid，别白费力气
IE10 只有极早期的实验性 -ms-grid（需启用特定文档模式），且不支持 -ms-grid-columns 的 fr 单位、不支持 -ms-grid-row-align 等关键能力。Can I Use 数据显示，IE10 的 Grid 支持度低于 5%，实际项目中应视为「不支持」。
如果你的项目还要求兼容 IE10，Grid 就不该出现在技术选型清单里 —— 直接用 Flexbox + media query 降级，比硬塞 -ms-grid 更省调试时间、更少出视觉 bug。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
