autoprefixer 默认关闭grid前缀支持，需显式配置grid: true并声明ie 11等目标浏览器，否则不生成-ms-grid相关前缀，因其不降级语法而仅做属性映射。
PostCSS 本身不优化网格兼容性，真正起作用的是 autoprefixer 插件配合正确的配置；但仅靠它远远不够——IE11 的 -ms-grid 支持需显式开启，且必须搭配 browserslist 精确声明目标，否则生成的代码根本不会包含任何 -ms- 前缀。
为什么 autoprefixer 不自动加 -ms-grid 前缀？
Autoprefixer 默认关闭 Grid 前缀支持，因为现代 Grid 语法和 IE11 的 -ms-grid 是两套完全不兼容的实现。它不会“降级”语法，只做属性映射。
-
grid-template-columns: 1fr 1fr→ 只有显式启用grid: true才会生成-ms-grid-columns -
display: grid→ 必须同时输出display: -ms-grid，否则 IE11 完全忽略整条规则 - 如果
browserslist没写"IE 11"或"Edge ，Autoprefixer 根本不会查 IE 相关数据，<code>grid: true形同虚设
必须配对的三个关键项
缺一不可，顺序或值错一个，-ms-grid 就不会出现。
-
postcss.config.js中require('autoprefixer')({ grid: true })—— 注意是对象参数，不是布尔值 -
browserslist字段（推荐写在package.json）必须包含明确版本，例如："IE 11", "Edge ；避免用 <code>"last 2 versions"这类模糊表达 - 运行
npx browserslist确认输出里真有ie 11；再跑npx autoprefixer --info看grid-template-columns是否标记为 “supported”
常见转换失败现象与对应检查点
写了 Grid 语法却没生成 -ms- 代码？先盯住这几个地方：
- CSS 文件没进 PostCSS 流程：Vite 项目中若在
vite.config.js里写了css.postcss，会覆盖默认配置，导致postcss.config.js被忽略 - Webpack 中
postcss-loader位置错误：必须放在css-loader之后，且css-loader的importLoaders≥ 1，否则@import的 Grid 规则不经过 Autoprefixer - Vue 项目中只对
<style lang="postcss"></style>生效；普通<style></style>块需确认 loader 链含postcss-loader - Grid 写法超出 Autoprefixer 能力：比如
grid-template-areas中用了变量或计算值，AST 解析失败，直接跳过整条规则
注意：-ms-grid 不等于现代 Grid
生成了 -ms-grid-columns 并不意味着布局能跑通。IE11 的 -ms-grid 不支持 gap、auto-fit、minmax()，也不识别 grid-area 的区域名引用（必须拆成 -ms-grid-row/-ms-grid-column）。这些不是插件漏了，而是技术代差决定的硬限制。
真正容易被忽略的是：你写的 grid-area: header 在 IE11 中完全无效，必须手动写成 -ms-grid-row: 1; -ms-grid-column: 1;，而 Autoprefixer 不会帮你做这种语义转换——它只负责前缀映射，不负责逻辑重写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
