旧版浏览器css grid兼容需手动处理：ie11仅支持-ms-grid且须前置，safari≤10.1不支持gap和grid-template-areas，@supports在ie11中完全无效，autoprefixer不自动生成-ms-前缀，gap失效时应以margin模拟而非前缀。
旧版浏览器（IE11、Chrome ≤56、Safari ≤10.1）对 CSS Grid 的支持不是“部分失效”，而是按特性逐条静默丢弃——grid-template-areas 被跳过、gap 不渲染、fr 单位解析为 0、@supports (display: grid) 在 IE11 中整块被忽略。指望 Autoprefixer 自动降级或 polyfill 全面兜底，基本等于没做兼容。
IE11 中 display: grid 完全不生效，必须手写 -ms-grid
IE11 只认 display: -ms-grid，且必须放在 display: grid 前面；它不解析现代 Grid 语法，连 grid-column: 2 / 4 这种基础写法都会被忽略。
-
grid-template-columns: 1fr 2fr→ 必须手动补-ms-grid-columns: 1fr 2fr（注意：IE 对fr支持不稳定，简单布局建议改用50% 50%或200px 300px） -
grid-column: 1 / 3→ 拆成-ms-grid-column: 1+-ms-grid-column-span: 2（不能用负索引-1，IE 不识别） -
justify-items: center→ 替换为-ms-grid-column-align: center（-ms-grid-row-align同理） - 所有子项都必须显式定位，否则默认落在第 1 行第 1 列
Safari ≤10.1 不支持 gap 和 grid-template-areas，需双写 + 严格 @supports
Safari 10.1 能识别 display: grid，但 gap、grid-template-areas、auto-fit 全部静默失效——布局会退化为单列流式，且 DevTools 中这些属性显示为灰色或带删除线。
-
gap: 1rem必须双写：-webkit-grid-gap: 1rem+gap: 1rem（Autoprefixer 默认不补-webkit-，即使开了grid: true） -
grid-template-areas彻底禁用，改用行列线定位：grid-column: 1; grid-row: 1，避免用grid-area: header -
@supports (display: grid)单条件检测会放行 Safari 10.1 → 必须加模板约束：@supports (display: grid) and (grid-template-columns: 1fr) - 降级样式（如
display: flex）必须写在@supports块外层，否则 IE11 和 Safari ≤9 根本看不到
gap 失效时，用 margin 模拟比加前缀更可靠
grid-gap 在 IE 全系、Safari ≤14.1、Android WebView ≤76 中均被浏览器静默忽略，getComputedStyle(el).gap 返回空字符串。此时加前缀无效，而 margin 是唯一可控手段。
- 横向间隙：
.item { margin-right: 12px; box-sizing: border-box; }+.item:nth-child(3n) { margin-right: 0; } - 纵向间隙：
.item { margin-bottom: 12px; }+.grid { margin-bottom: -12px; }（父容器负边距抵消最后一行多余间距） - 务必统一设
box-sizing: border-box，否则margin会撑破容器宽度 - 避免用
padding或border模拟，它们破坏盒模型，在响应式断点切换时极易错位
@supports 检测本身在 IE11 中无效，必须配合外置降级
@supports 规则在 IE11 中整条被跳过，既不执行也不报错。这意味着你把 display: flex 写在 @supports 块里，IE11 就完全看不到——它只认写在块外的样式。
- 正确结构：
.grid-container { display: flex; flex-wrap: wrap; } /* 所有浏览器都生效 */<br>@supports (display: grid) and (grid-template-columns: 1fr) {<br> .grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)));} } - 别信 “Autoprefixer + browserslist” 能自动覆盖 IE11 Grid —— v9+ 版本已移除该能力，源码没写
display: -ms-grid，输出就绝不会有-ms-属性 - 真机调试时，用 Safari 开发者工具的 Computed 面板直接查
display和grid-template-columns值，比看文档更准 - 本地开发看到“正常”，很可能是缓存的旧 CSS 在起作用；验证兼容性请用 BrowserStack 或真实 Chrome 56 环境访问线上静态 HTML
最易被忽略的点是：你以为写了 @supports 就完成了兼容，其实 IE11 根本没执行那块代码；你以为 Autoprefixer 会帮你转 grid-column，但它只在你先写了 display: -ms-grid 的前提下才补属性——漏掉任何一个前提，旧浏览器就只能靠 fallback 流式排版硬扛。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
