autoprefixer 无法让 ie11 支持 display: grid，它仅在源码已手动声明 display: -ms-grid 的前提下补全少量配套属性；v9+ 版本已彻底移除 grid 语法转换能力，不处理 gap、fr、grid-template-areas 等，也不支持自动降级。
Autoprefixer 不能让 IE11 支持 display: grid，它只会在你**已经手动写了 display: -ms-grid 的前提下**，补几个配套属性；想靠它自动把现代 Grid 语法“转成” IE 可用代码，2026 年已彻底不可行。
为什么 display: grid 在 IE11 里完全不生效
IE11 压根不识别 display: grid 这条声明，不是漏前缀，是语法层面拒绝解析。它只认 display: -ms-grid，且该语法来自 2011 年草案，和现代 Grid 标准互不兼容。Autoprefixer v9+ 已移除所有 Grid 语法转换能力，文档明确写着 “Grid is not prefixed”——它连 grid-gap 都不会加 -webkit- 或 -ms- 前缀。
- 写
.grid { display: grid; }→ IE11 当作display: block渲染，布局直接塌陷 - 写
.grid { display: -ms-grid; }→ IE11 才开始按网格解析，但必须配合-ms-grid-columns等显式定义 -
browserslist里只写"last 2 versions"→ IE11 不会被包含，autoprefixer根本不触发 IE 相关逻辑
怎样写出 Autoprefixer 能处理的 Grid 源码
Autoprefixer 只对已含 display: -ms-grid 的规则做有限补全，且仅限部分基础属性（如 grid-template-columns → -ms-grid-columns）。它不会处理 grid-gap、grid-template-areas、grid-column: 2 / -1 这类 IE 完全不支持的写法。
- 父容器必须并列写：
display: -ms-grid; display: grid;（-ms-在前） - 列定义用
grid-template-columns: 1fr 2fr;→ Autoprefixer 才可能转出-ms-grid-columns: 1fr 2fr; - 子项定位必须拆开：
grid-column-start: 2; grid-column-end: 4;，不能写grid-column: 2 / 4或grid-area - 避免
minmax()、auto-fit、负索引——这些在 IE11 中要么报错，要么被静默忽略
验证 Autoprefixer 是否真在工作
别信配置文件里写了 grid: true，v10+ 版本该选项已废弃，实际无效。唯一可靠方式是查构建产物 CSS 文件：
- 运行
npx browserslist，确认输出里有ie 11 - 搜索编译后 CSS，找
-ms-grid-columns、-ms-grid-rows字符串——一个都没有，说明没进 PostCSS 流程或源码没写对 - 在 IE11 开发者工具中看“计算样式”，
display值要是-ms-grid，而不是回退到block - Vite 项目要检查
vite.config.js是否误覆写了css.postcss，导致默认 PostCSS 配置丢失
真正能跑通 IE11 Grid 的最小可行写法
没有全自动方案。以下是最简双写结构，也是 Autoprefixer 唯一能配合的部分：
.grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 1fr;
grid-template-columns: 1fr 1fr;
}
.grid > :first-child {
-ms-grid-column: 1;
grid-column-start: 1;
}
.grid > :last-child {
-ms-grid-column: 2;
grid-column-start: 2;
}
注意：-ms-grid 是静态网格，没有隐式轨道、没有 gap、不支持 fr 混合 auto（比如 auto 1fr 易错位），所有子项位置都得手动算清列号。复杂布局建议直接换 Flexbox 回退，比硬撑 -ms-grid 更可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
