Grid布局需显式声明display: grid才生效，旧版浏览器不支持且autoprefixer不加前缀；IE10/11须用-ms-grid手写布局，兼容需实测验证。
Grid布局在旧版Chrome/Firefox里不生效？检查是否漏了display: grid的显式声明
很多开发者以为加了grid-template-columns就自动启用Grid，其实不是。CSS Grid必须显式设置display: grid或display: inline-grid才能触发渲染引擎的Grid解析逻辑——否则所有grid-*属性都会被忽略，连现代浏览器也一样。
旧版浏览器（如Chrome 57以下、Firefox 51以下）根本不支持display: grid，这时加前缀也没用。真正要解决的是“兼容性兜底”问题，而不是盲目加前缀。
- 确认父容器是否写了
display: grid（仅写grid-template-areas无效） - 用
@supports (display: grid)做特性检测，避免在不支持的浏览器中加载冗余Grid样式 - 旧版Safari（≤10.1）虽支持
display: -webkit-grid，但grid-gap需写成-webkit-grid-gap，且不支持fr单位
autoprefixer对Grid布局加前缀有用吗？基本没用
autoprefixer默认**不为Grid属性加前缀**，即使你配置了browsers: ["last 2 versions"]。这是故意设计的：因为各浏览器早期Grid实现差异极大（比如IE的display: -ms-grid和Firefox 52之前的实验性语法完全不兼容），加错前缀反而导致布局崩溃。
从autoprefixer 9.0+开始，它只对display: grid加-ms-前缀（仅限IE10/11），其他所有grid-*属性一律不处理——文档明确写着“Grid is not prefixed”。指望它自动兼容IE或老Safari，会白忙一场。
立即学习“前端免费学习笔记（深入）”；
- IE10/11必须用
display: -ms-grid+-ms-grid-column/-ms-grid-row重写整套布局 - 不要在同一个选择器里混写
display: grid和display: -ms-grid，IE会忽略后者 - PostCSS插件
postcss-cssnext已废弃，postcss-grid-kiss等替代方案是语法转换，不是前缀补全
需要真·兼容IE10/11？放弃auto-placement，手写-ms-grid-line
IE10/11的-ms-grid不支持grid-template-areas或grid-auto-flow，所有格子位置必须用-ms-grid-column和-ms-grid-row硬编码。自动计算列宽（比如1fr 2fr）也得换算成百分比或固定值。
例如grid-template-columns: 1fr 2fr在IE里得写成-ms-grid-columns: 1fr 2fr（仅IE10支持fr），但IE11只认1fr而拒绝2fr，此时只能退化为-ms-grid-columns: 33.33% 66.66%。
-
-ms-grid-column-span对应grid-column-end，但不支持span 2这种写法，只能写具体数字 - IE11不支持
grid-gap，改用margin模拟，但要注意box-sizing影响尺寸计算 - Flexbox作为降级方案更可靠：IE10+完整支持
display: flex，多数Grid一维布局可用Flex替代
现在还值得为IE做Grid兼容吗？看真实用户数据
全球IE整体使用率已低于0.5%（StatCounter 2024），国内部分政企内网可能还有IE11，但它们通常锁定特定版本、禁用自动更新——这意味着你无法依赖“升级浏览器”来解决兼容问题，而必须做真实适配。
关键不是“要不要兼容”，而是“怎么验证兼容有效”。别只在CanIUse查表格，直接用BrowserStack或真实IE虚拟机测getComputedStyle(el).display是否返回-ms-grid，再检查元素是否按预期排列。
- 用
document.documentMode判断是否IE，documentMode === 11才走-ms-grid分支 - Webpack中可通过
process.env.BROWSER_ENV条件注入不同CSS文件，避免现代浏览器加载IE专用规则 - 最易被忽略的一点：IE11不支持
@media (min-width: ...)中的grid-template-columns，媒体查询里的Grid规则必须单独提取并重复声明
