Grid布局在老版浏览器不生效，需确认浏览器版本并手动兼容：Chrome 57+/Firefox 52+支持无前缀display: grid，Edge 15–16需display: -ms-grid，Safari 10.1需-webkit-grid-gap，IE11则须完全手写-ms-grid语法或降级为Flexbox。
Grid布局在老版Chrome/Firefox里不生效？先确认是否启用了display: grid的现代语法
现代CSS Grid（比如grid-template-areas、grid-gap）在IE完全不支持，Edge 15–16只支持旧版语法（display: -ms-grid），而Chrome 57+、Firefox 52+才稳定支持无前缀的display: grid。Autoprefixer不会“降级”成旧Grid语法——它只补前缀，不改语法结构。
常见错误现象：display: grid写了但子元素没按预期排列，控制台也没报错；实际是浏览器根本没识别该声明，直接忽略。
- 检查目标浏览器版本：用
caniuse.com/grid查具体支持项，别只看“支持Grid”这种笼统说法 - 如果必须兼容Edge 15–16或Safari 10.1，得手动写两套：现代语法 +
display: -ms-grid回退（Autoprefixer不生成这套） -
grid-gap在Safari 10.1需要-webkit-grid-gap，Autoprefixer能补，但前提是你的Browserslist配置包含safari 10.1
Autoprefixer到底给Grid补哪些前缀？不是所有属性都加
Autoprefixer对Grid的支持非常克制：它只给明确有历史前缀需求的属性加，且仅限于真实存在过前缀的浏览器。比如grid-column-start从没被加过-webkit-前缀，它就不会动；但grid-gap在Safari 10.1确实需要-webkit-grid-gap，就会补。
使用场景：你写了grid-template-columns: repeat(3, 1fr)，Autoprefixer不会给它加任何前缀——这个语法从未有过厂商前缀。
- 会被补前缀的典型属性：
grid-gap、grid-row-gap、grid-column-gap（对应-webkit-和-ms-） - 不会补前缀的属性：
grid-area、grid-template-areas、justify-items（这些在支持Grid的浏览器中都是无前缀原生支持） - 参数差异：Browserslist设为
last 2 versions时，可能不包含Safari 10.1；要补-webkit-grid-gap，得显式写safari >= 10.1
为什么加了Autoprefixer还是看到布局错乱？检查Browserslist配置是否真生效
很多人装了Autoprefixer插件，却没意识到它的行为完全由项目根目录下的.browserslistrc或package.json里的browserslist字段决定。默认配置往往太宽松，漏掉关键旧版本。
性能影响：补太多前缀会让CSS体积略增，但Grid相关前缀本身极少，基本可忽略；真正影响体积的是你手动写的冗余回退规则。
- 推荐最小可行配置：
chrome >= 57, firefox >= 52, safari >= 10.1, edge >= 16（覆盖主流Grid支持起点） - 避免写
last 2 versions——它会把Chrome 118/119当“最后两个”，自动剔除老版本，导致-webkit-grid-gap不生成 - 验证是否生效：在命令行运行
npx autoprefixer --info，看输出里是否列出目标浏览器及对应前缀
IE11要显示类似Grid的效果？别指望Autoprefixer，得换思路
Autoprefixer对IE11的display: -ms-grid支持极其有限：它只补-ms-前缀的个别属性（如-ms-grid-column），但不会帮你把grid-template-columns: 1fr 2fr转成-ms-grid-columns: 1fr 2fr。IE11的Grid是完全不同的语法，无法自动转换。
容易踩的坑：有人以为开了Autoprefixer就能“一键兼容IE”，结果布局在IE11里彻底消失——因为display: grid被忽略，又没提供display: -ms-grid回退。
- 真要支持IE11：必须手写
display: -ms-grid+-ms-grid-column等，并用@supports (display: grid)做隔离 - 更现实的做法：用
feature queries渐进增强，让IE11降级到float或flexbox布局（Flexbox在IE10+有较好支持） - 注意
grid-gap在IE11完全无效，得用margin模拟间隙，且需额外处理最后一行子项的多余外边距
事情说清了就结束。真正麻烦的从来不是加几个前缀，而是得时刻分清楚：哪些是Autoprefixer能干的，哪些是它根本不管的，还有哪些压根就得绕开它重写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
