<p>grid-template-areas 在旧版 WebKit（Safari ≤10.1）中完全不支持，无论加不加前缀，强行使用会导致整个 display: grid 声明失效而回退为 block，必须改用 grid-column/grid-row 显式定位并配合 -webkit- 前缀。</p>
grid-template-areas 在旧版 WebKit（Safari
不是“错乱”，是直接忽略整个 grid-template-areas 声明，回退到浏览器默认的流式布局或 fallback 的 display: grid 行为（即无区域划分）。你写的 "header header" "nav main" "footer footer" 在 Safari 15.6 或 Chrome 87 里等于没写。
原因在于这些内核尚未实现 CSS Grid Level 2 中对命名区域的完整支持，尤其是 grid-template-areas 的字符串语法依赖较新的 parser 和 layout engine 路径。
- 旧 Safari（≤15.x）：仅支持
grid-area单个元素命名，不支持grid-template-areas定义区域网格 - 旧 Chromium（≤89）：会静默丢弃该声明，且不触发任何 warning 或 error
- Firefox 从 52+ 就稳定支持，不是问题源
用 grid-column / grid-row 显式定位是最小兼容改动
不改结构、不加 JS、不引入 polyfill，只需把每个子元素的区域映射，转成行列起止线编号。例如原意是：
grid-template-areas: "header header" "nav main" "footer footer";
对应三行两列，那么可等价替换为：
立即学习“前端免费学习笔记（深入）”；
-
header→grid-column: 1 / -1; grid-row: 1;（跨整行第1行） -
nav→grid-column: 1; grid-row: 2;（第2行第1列） -
main→grid-column: 2; grid-row: 2;（第2行第2列） -
footer→grid-column: 1 / -1; grid-row: 3;（跨整行第3行）
注意：-1 表示隐式最后一根线，在所有支持 Grid 的旧内核中都有效；避免用 span 2，因旧 Safari 对 span 在命名区域 fallback 场景下行为不一致。
别漏掉 grid-template-columns 和 grid-template-rows
显式行列定义后，容器必须明确声明轨道尺寸，否则旧内核可能按 auto 撑开、导致高度塌陷或列宽异常。比如：
- 必须写
grid-template-columns: 200px 1fr;（而非留空或只靠子项grid-column推导） - 必须写
grid-template-rows: 60px auto 40px;（尤其auto行在旧 Safari 中比minmax(0,1fr)更可靠） - 避免
grid-auto-rows替代显式grid-template-rows—— 旧 Chromium 会忽略它对命名区域的 fallback 行高控制
验证时重点看 Safari 技术预览（TP）和 Android WebView 4.4 内核
真机或模拟器里打开 DevTools → Elements → 查看 computed 样式，确认以下三点是否生效：
-
display: grid存在（不是block回退） -
grid-template-columns和grid-template-rows值非none - 各子元素的
grid-row-start/grid-column-start计算值与预期一致（例如nav应为2 / 1）
最容易被忽略的是：某些构建工具（如旧版 PostCSS grid plugin）会自动把 grid-column: 1 / -1 转成 grid-column: 1 / 3，而旧 Safari 不识别数字终点超出定义轨道数的情况 —— 必须保留 -1 或手动写死最大列号（如 1 / 3 仅当明确声明了 2 列时才安全）。
