Grid 布局需兼顾现代浏览器与旧版兼容：优先使用稳定属性，用 @supports 提供 flex fallback，IE11 专用 -ms-grid 适配，并通过真机测试和上下文统一保障一致性。
Grid 布局在现代浏览器中已广泛支持，但部分旧版浏览器（如 IE11、早期 Safari/Android Webview）对 CSS Grid 的解析存在差异，尤其在 grid-template-areas、subgrid、隐式轨道计算、自动行高处理等方面容易出现错位、塌陷或完全不渲染。解决核心是：用标准语法写 Grid，同时为不支持的环境提供合理 fallback，而非强行兼容。
优先使用稳定、广泛支持的 Grid 属性
避免依赖实验性或低兼容性特性。例如：
- 用
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))替代subgrid（目前仅 Firefox 支持，Chrome/Safari 尚未落地） - 避免在 IE11 中使用
grid-area搭配命名区域（IE 对grid-template-areas解析极脆弱），改用基于线号的定位：grid-column: 1 / 3; grid-row: 2; - 不用
gap在 IE 中（不支持），改用margin或包装容器 +flexfallback
为老浏览器提供 display: flex fallback
利用 @supports 安全降级，不干扰现代布局逻辑：
.grid-container {
display: flex;
flex-wrap: wrap;
}
@supports (display: grid) {
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1rem;
}
}
注意：IE11 不识别 @supports，所以它会直接走上面的 display: flex 分支 —— 这正是我们想要的 fallback 行为。
立即学习“前端免费学习笔记（深入）”；
IE11 专用适配：启用 -ms-grid 并隔离规则
若必须支持 IE11，可借助其私有 -ms-grid 实现基础网格（仅支持显式网格，无 auto-placement）：
.grid-container {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 1fr;
grid-template-columns: 1fr 1fr;
}
.grid-item:nth-child(1) {
-ms-grid-column: 1;
grid-column: 1;
}
.grid-item:nth-child(2) {
-ms-grid-column: 2;
grid-column: 2;
}
关键点：
– 必须按顺序声明 display: -ms-grid 在前，display: grid 在后，确保 IE 读取前者后停止解析
– 所有 -ms-grid-* 属性需成对提供对应标准属性，现代浏览器忽略私有属性
验证与调试建议
不要只靠本地 Chrome 测试。实际检查方式：
- 用 caniuse.com 查目标浏览器版本的 Grid 支持明细（特别关注 “grid-template-areas”、“gap”、“auto-placement” 等子项）
- 在 BrowserStack 或 Sauce Labs 中真机测试 Android 4.4 WebView、iOS 9 Safari、IE11
- 禁用 JS 后观察布局是否仍可用（避免依赖 JS 补丁掩盖 CSS 问题）
- 用开发者工具的 “Rendering” 面板（Chrome）或 “Layout” 检查器（Firefox）对比轨道尺寸和基线对齐差异
不复杂但容易忽略：Grid 的行为一致性高度依赖于父容器尺寸、内容内联格式（比如换行符/空格是否被渲染为文本节点）、以及是否设置了 box-sizing: border-box。统一重置这些上下文，比堆砌 hack 更有效。
