Grid兼容性需按特性分级处理：IE11仅支持-ms-grid旧语法且需手动换算行列索引，Safari 9–10.1不支持gap和fr单位；应优先用@supports检测关键能力并外置降级样式，gap失效时用margin负值抵消。
查 Grid 支持度不能只看 caniuse 上的“绿色”
caniuse 显示 display: grid 在 Chrome 57+、Firefox 52+ 就支持，但实际项目里 IE11 和 Safari 9–10.1 仍常见——它们要么不支持 grid-template-areas，要么对 gap 完全无视，甚至把 fr 单位解析成 0。兼容性不是“有/无”，而是“支持到哪一步”。
- IE11 支持旧版语法（
display: -ms-grid），但不识别grid-column-start等现代属性，必须用-ms-grid-column - Safari 10.1 及更早：支持
grid-template-columns，但grid-gap无效，需改用margin模拟 - 所有旧浏览器都不认
subgrid和grid-auto-flow: dense，写了等于没写
用 @supports 写降级比 user-agent 判断更可靠
@supports 能真实检测 CSS 特性是否生效，比 JS 判断 navigator.userAgent 更准——后者容易被篡改或误判（比如 Safari 10.1 声称支持 grid-gap，其实不渲染）。
- 优先检测关键能力：
@supports (display: grid) and (grid-template-columns: 1fr) - 避免嵌套太深：
@supports (display: grid) { @supports (gap: 1rem) { ... } }在 Safari 中可能被整体跳过 - 降级样式必须写在
@supports外层，否则旧浏览器根本看不到后备布局
@supports (display: grid) {
.layout { display: grid; grid-template-columns: 1fr 2fr; }
}
.layout {
/* 所有浏览器都生效的 float / flex 回退 */
display: flex;
}IE11 的 -ms-grid 需要手动换算行/列索引
IE11 的 -ms-grid-column 和 -ms-grid-row 是从 1 开始的整数，且不支持 span 语法或 grid-area 别名。现代 Grid 的 grid-column: 2 / -1 在 IE 里得拆成两行 + 计算终点。
- 列起始：直接取
grid-column-start的数值（如2→-ms-grid-column: 2） - 列结束：若为
-1，需手动算总列数（如grid-template-columns: 1fr 2fr 1fr共 3 列，则-ms-grid-column-span: 2） - 必须加
-ms-grid-row-align和-ms-grid-column-align控制对齐，否则默认顶对齐
gap 属性失效时，用 margin 负向抵消是唯一可行方案
旧版 Safari 和 IE11 对 gap 完全静默，既不报错也不渲染。想靠 padding 或 border 模拟间距会破坏盒模型尺寸，尤其在响应式中极易错位。
立即学习“前端免费学习笔记（深入）”；
- 网格项统一加
margin-right和margin-bottom，再用:nth-child清除末尾项的 margin - 避免用
margin-left或margin-top，否则首行/首列会空出多余空白 - Flex 回退时也用同样 margin 策略，保持视觉一致性
真正麻烦的不是写两套样式，而是当设计稿要求“3 列等宽 + 16px 间隙”时，你得同时维护 calc((100% - 32px)/3)、-ms-grid-column 偏移、以及 margin 抵消逻辑——三者稍有不同步，整个栅格就塌掉。
