ios 14（safari 14）仅部分支持 grid-template-areas，仅限单行无空格极简用法；完整多行带 . 占位语法需 safari 15.4（ios 15.4）；此前该声明被静默丢弃，导致 display: grid 退化为 block。
grid-template-areas 在 iOS 14 之前根本不会解析
iOS 14 对应 Safari 14，而 Safari 14 是 WebKit 首次**部分支持** grid-template-areas 的版本——但仅限于单行字符串、无换行、无空格占位的极简用法。真正稳定支持多行带 . 占位的完整语法，要等到 Safari 15.4（对应 iOS 15.4）。所以你在 iOS 14 或更早设备上看到“错乱”，其实是浏览器直接跳过整条声明，display: grid 退化为 display: block，所有子元素回归流式布局。
- 检查方法：在 Safari 开发者工具的 Computed 面板里看
display是否仍是grid；如果不是，说明grid-template-areas已被静默丢弃 - 不要依赖
@supports (display: grid)来判断——它只检测基础 Grid，不检测grid-template-areas是否可用 - 真机调试时，用
eruda的 Grid 面板比桌面模拟器更准，能立刻看出网格线是否存在
改用 grid-column / grid-row 显式编号定位
这是兼容 iOS 14 及更早版本最轻量、最可靠的替代方案：不改 HTML 结构、不加 JS、不引入 polyfill，只需把区域名映射转成行列线编号。
-
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，Safari 10–14 对span在 fallback 场景下行为不稳定
必须同步替换 gap 相关写法
iOS 14 的 WebKit 不支持 row-gap 和 column-gap 单独声明，只认合写的 gap。如果你用了 row-gap: 12px，它会被忽略，导致子项紧贴、视觉“错位”。
- 把
row-gap: 12px; column-gap: 16px;全部改为gap: 12px 16px; - 确保父容器没设
overflow: hidden——旧 Safari 下gap推挤会导致子项溢出被裁，看起来像 gap 消失了 - 如果用
gap后仍有错位，临时加outline: 1px solid red到子元素上，观察 outline 是否贴着网格线；如果不是，说明 grid 定位本身就没生效
媒体查询中不能只改 template-areas，要重写整套定位
很多人以为在移动端媒体查询里只写 grid-template-areas: "header" "main" "footer" 就够了，但 iOS 14 不识别这个声明，结果还是回退到 block 布局，而你又没给子元素写 grid-column/grid-row，于是整个响应式逻辑崩掉。
- 每个断点都要独立写全显式定位规则，比如移动端补上：
.header { grid-column: 1; grid-row: 1; }、.main { grid-column: 1; grid-row: 2; }等 - 避免混用：不要在桌面端用
grid-template-areas，移动端却指望靠它切换——iOS 14 根本不认前者，后者自然也无效 - 如果结构简单，可直接用
display: contents配合媒体查询隐藏容器、释放子元素进网格，比反复写grid-row更干净（注意：iOS 14.5+ 支持display: contents）
旧版 Safari 对命名区域的支持不是“错位”，是彻底无视。最易被忽略的点是：你以为自己在调试 layout，其实连 grid 的基本上下文都没建立起来——先确认 display 是 grid，再谈位置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
