IE11仅支持2012草案版Grid，需用-ms-前缀（如-ms-grid-column）、手动行列定位、margin模拟gap，autoprefixer v9+已移除对其支持，@supports在IE11中无效，float/inline-block仅适用于简单一维布局，css-grid-polyfill性能差且已停更，最佳实践是为IE11提供简化线性布局。
Grid在IE11里完全不生效，连display: grid都被忽略
IE11只支持旧版Grid语法（2012草案），现代CSS Grid规范（2017年W3C推荐标准）对它来说是“不存在的”。它不认识grid-template-areas、gap、fr单位，甚至grid-column-start这种基础属性都要写成-ms-grid-column。
- 必须用
@supports或JS检测来分流：现代浏览器走display: grid，IE11走display: -ms-grid -
grid-template-columns: 1fr 2fr→ IE11里得拆成-ms-grid-columns: 1fr 2fr，且必须配合-ms-grid-row/-ms-grid-column手动定位每个子项 -
gap在IE11里无效，得用margin模拟，但要注意margin会破坏-ms-grid的严格行列对齐
autoprefixer能自动加-ms-前缀吗
不能。autoprefixer从v9开始就移除了对IE Grid前缀的支持，因为它的实现和现代Grid语义差异太大，不是加个前缀就能跑通的事。
- 检查你的
postcss.config.js，如果还配着autoprefixer({ grid: true })，它不会生成任何IE Grid代码 - 想让工具链输出兼容代码，得换方案：用
postcss-grid-kiss或手写两套布局，再用@supports (display: grid)包裹现代部分 - 注意
@supports本身在IE11里不被支持，所以这个检测只能在Edge 16+及现代浏览器中生效；IE11会直接跳过整个块
用float或inline-block fallback靠谱吗
在简单一维布局（比如导航栏、卡片流）里可以，但只要涉及二维对齐（比如表单字段+标签+错误提示在同一行对齐）、跨行/跨列，就会迅速失控。
-
float需要清除浮动，容易引发父容器塌陷；inline-block有看不见的空白字符间隙，font-size: 0又会影响内部文本 - 响应式断点切换时，Grid的
grid-template-areas可读性高，而float方案往往要写三套media query + 三套float规则 - 如果项目已用CSS-in-JS或组件库（如Styled Components），建议把Grid逻辑封装进
Grid组件，内部用className条件渲染两套样式，比全局fallback更可控
要不要用css-grid-polyfill
别用。css-grid-polyfill（也叫ie11-custom-properties配套的Grid polyfill）早已停止维护，它靠JS重排DOM节点模拟Grid行为，在列表滚动、动画、表单交互场景下性能极差，且不支持grid-auto-flow等动态能力。
立即学习“前端免费学习笔记（深入）”；
- 实际项目中测过：20个子元素的网格，在IE11里滚动帧率掉到5fps以下
- 它也不能正确处理
position: sticky或transform叠加的场景，容易导致子项错位 - 真要保IE11，最稳的路径是设计阶段就约定“IE11用户看到的是简化版线性布局”，而不是试图用polyfill还原视觉一致
Grid兼容性的核心矛盾不在语法转换，而在布局模型本身：IE11的-ms-grid是静态行列坐标系，现代Grid是弹性流动容器。想两边都照顾好，就得接受“同一份设计稿，在IE11里天然少一层抽象能力”这个事实——不是技术没到位，是引擎能力边界卡在这儿。
