旧版 safari（ios 15.4 前/safari ≤10.1）存在 css grid 兼容性断层：grid-template-areas 被静默丢弃、gap 不生效、fr 单位解析异常、row/column-gap 完全忽略，需用 -webkit- 前缀双写属性、改用行列线定位、统一 gap 合写语法，并以 flexbox 为终极 fallback。
旧版 Safari（特别是 iOS 15.4 之前、Safari ≤10.1）对 CSS Grid 的支持存在断层：grid-template-areas 被静默丢弃、gap 不生效、fr 单位解析异常、row-gap/column-gap 完全忽略，导致布局错位或退化为单列流式——这不是代码写错了，而是浏览器压根没解析那些声明。
确认是否真为 Safari 兼容性问题
别靠猜测，用 Safari 自带开发者工具直接验证：
打开 Develop → Show Web Inspector → 选中错位元素 → 切到 Computed 面板，搜索 display，若显示为 block 或 inline，则说明 grid 声明已被忽略；再搜 grid-template-columns，若值为空或 none，基本可锁定是 Safari 旧内核不支持该语法。
临时加 outline: 1px solid red 到网格子项上，观察 outline 是否贴着预期网格线排列——如果 outline 紧贴文字边缘而非按列对齐，证明 grid 定位根本未触发。
真机调试务必用 eruda（CDN 引入后右下角唤出），它的 Grid 面板能实时显示网格线编号和元素实际占用区域，比桌面模拟器准得多。
禁用 grid-template-areas，改用数字线定位
grid-template-areas 在 Safari ≤10.1 和 iOS 14 中完全不支持，强行使用会导致整个 display: grid 声明失效，回退为 display: block。必须彻底移除该声明，改用显式行列线编号。
方法一：手动映射区域名到行列索引
header 区域跨整行第一行 → grid-column: 1 / -1; grid-row: 1;
nav 在第二行第一列 → grid-column: 1; grid-row: 2;
main 在第二行第二列 → grid-column: 2; grid-row: 2;
footer 跨整行第三行 → grid-column: 1 / -1; grid-row: 3;
【-1 表示隐式最后一根线，所有支持 Grid 的旧内核都认，比 span 2 更可靠】
方法二：避免在媒体查询中只改 template-areas
很多人以为移动端只写 @media (max-width: 768px) { grid-template-areas: "header" "main" "footer"; } 就够了，但 Safari ≤14 根本不识别这行代码，结果仍是 block 布局。必须重写整套 grid-column/grid-row 定位规则。
修复 gap 失效问题
Safari ≤10.1、iOS ≤15.3 不支持 row-gap 或 column-gap 单独声明，只认合写的 gap 属性。若用了 row-gap: 12px，它会被静默忽略，子项紧贴错位。
第一步：统一改用 gap 合写语法
将 row-gap: 12px; column-gap: 16px; 替换为 gap: 12px 16px;
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
第二步：检查父容器 overflow 设置
若父容器设了 overflow: hidden，gap 推挤会导致子项溢出被裁切，视觉上像 gap 消失了。临时去掉 overflow: hidden 验证是否恢复间距。
第三步：确保所有子项 box-sizing: border-box
这是 margin 模拟 fallback 的前提，否则 padding/border 会撑破容器宽度，引发换行异常或滚动条意外出现。
降级到 -webkit-grid + 双写属性
Safari ≤10.1 仅识别带 -webkit- 前缀的 Grid 属性，且 autoprefixer 默认不生成这些前缀。必须人工双写，顺序不能错。
方法一：display 属性必须双写
display: -webkit-grid;
display: grid;
注意：Safari 10.1 不识别无前缀的 display: grid，只取第一条 -webkit-grid；Chrome/Firefox 则跳过第一条，取第二条标准值。
方法二：gap 必须显式补 -webkit- 前缀
-webkit-grid-gap: 12px;
grid-gap: 12px;
autoprefixer 即使开启 grid: true，也只展开为 grid-row-gap/grid-column-gap，【不会加 -webkit- 前缀，必须手写】
方法三：对齐属性需配前缀
justify-items: center → -webkit-justify-items: center; justify-items: center;
align-items: start → -webkit-align-items: start; align-items: start;
注意：Safari 10.1 对 stretch 值支持异常，优先用 start 或 flex-start。
终极 fallback：用 Flexbox 降级
当目标设备包含大量 iOS 14 以下或 Safari 9–10.1 时，纯 CSS 渐进增强比 JS 检测更稳——先写 Flex 基础布局，再用 @supports 覆盖 Grid。
第一步：写基础 Flex 布局（所有浏览器生效）
.container {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.item {
-ms-flex: 0 0 300px;
flex: 0 0 300px;
}
第二步：用 @supports 启用 Grid（仅现代浏览器执行）
@supports (display: grid) and (grid-template-columns: 1fr) {
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1rem;
}
.item { margin: 0; }
}
注意：@supports 必须用双条件检测，单写 @supports (display: grid) 会让 Safari 10.1 进入 Grid 分支却因不支持 gap 而布局碎裂。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
