IE11仅支持2012年旧版CSS Grid草案，需用-ms-grid-columns等前缀属性，不兼容grid-template-columns、gap等现代语法，且autoprefixer v9+已放弃自动补全，推荐用@supports回退至Flex或Float布局。
IE11 支持 Grid，但只认旧草案语法
IE10/11 确实支持 CSS Grid，但用的是 2012 年的旧版规范（TR/2012/WD-css-grid-1-20120320），和现代 grid-template-columns、grid-gap、auto-fit 完全不兼容。它只识别带 -ms- 前缀的属性，比如 -ms-grid-columns 和 -ms-grid-rows，且必须手动指定每个格子的行列位置，不能用 grid-area 或命名区域。
常见错误现象：display: grid 在 IE11 里直接失效，元素堆叠或塌陷；加了 -ms-grid-column: 1 却没生效——那是因为漏写了 display: -ms-grid，或者没配合 -ms-grid-columns 定义列宽。
- 必须用
display: -ms-grid替代display: grid -
-ms-grid-columns不接受fr或minmax()，只支持固定值、auto、1fr（注意：IE 里1fr是特例，不是标准 fr） - 子元素定位靠
-ms-grid-row/-ms-grid-column，不能用grid-column-start等现代属性 -
@supports (display: grid)在 IE11 中完全不执行，无法用于特性检测
autoprefixer 已放弃 IE Grid 自动补全
v9.0+ 的 autoprefixer 默认不再生成 -ms- Grid 前缀，即使你配置了 browsers: ["IE >= 10"]。这不是 bug，是官方明确移除的支持——因为旧语法行为差异太大，自动转换极易出错。
如果你仍想让工具链“尝试”补全，得降级到 autoprefixer v8.x，并显式启用旧模式：
立即学习“前端免费学习笔记（深入）”；
module.exports = {
plugins: [
require('autoprefixer')({
grid: true, // 必须设为 true（v8 中默认 false）
browsers: ['IE >= 10']
})
]
}
但强烈不建议这么做。实际项目中，v8 补全的 -ms-grid 往往漏掉行列定义、错位、甚至把 gap 转成无效的 margin，反而增加调试成本。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
别硬套 Grid，IE11 该用线性降级布局
真正稳定的方案不是“让 IE11 跑 Grid”，而是用 @supports 切出两套布局：现代浏览器走 display: grid，IE11 回退到 display: flex 或 float + width 的线性结构。
Flexbox 在 IE10/11 中虽有缺陷（比如 flex-wrap: wrap 下 align-content 不生效），但比 Grid 旧语法可靠得多；而纯 float 方案只要控制好清除和宽度计算，在 IE8+ 都能稳住。
- 用
@supports not (display: grid)匹配无 Grid 支持的浏览器（IE11 会进这个分支） - 避免在 IE 专用样式里写
grid-相关声明——它们会被忽略，还可能干扰后续规则解析 - 如果必须用 gap 模拟，用
margin手动控制，别依赖gap自动转换（IE 不认识该属性） - 测试重点不是“看起来像不像”，而是“内容是否可读、交互是否可达、容器是否撑开”
IE10 根本不该列入 Grid 兼容目标
IE10 只支持更早期的 Grid 实验性实现（仅 -ms-grid，无行列函数、无自动定位、无响应式列定义），连 -ms-grid-columns: 50px 1fr 都会解析失败。知识库多处指出“IE10+ 有部分支持”，但这个“部分”实际意味着：无法用于任何真实业务卡片、仪表盘或响应式网格场景。
当前时间是 2026 年，主流项目已普遍放弃 IE10；若你还在被要求兼容它，需直面一个事实：Grid 在 IE10 中没有可用路径。要么说服产品接受降级 UI，要么引入 JS 布局库（如 css-grid-polyfill），但该库早已停更、无维护、性能差，只适合 demo。
最容易被忽略的一点：很多团队花大量时间调 -ms-grid 的行列偏移，却忘了 IE11 下 position: sticky、aspect-ratio、甚至 calc() 的兼容性也极差——Grid 只是冰山一角，整套现代 CSS 生态在 IE 里都是断裂的。
