Safari ≤10.1 仅支持带 -webkit- 前缀的 Grid 属性：display 必须写 -webkit-grid 和 grid；grid-gap 需 -webkit-grid-gap；grid-template-areas 完全不支持，须用 grid-column/row 降级；autoprefixer 无法覆盖，须手动双写并真机测试。
旧版 Safari（特别是 10.1 及更早）对 CSS Grid 的支持非常有限——它只认 display: -webkit-grid，且不支持 grid-template-areas、grid-gap（需用 -webkit-grid-gap）、grid-auto-flow 等关键属性，连 fr 单位都不可靠。纯 autoprefixer 已无法覆盖这些缺口，必须手动补前缀 + 降级策略。
哪些 Grid 属性在 Safari ≤10.1 中必须加 -webkit- 前缀
autoprefixer 默认不为 Safari 10.1 生成足够前缀，尤其对以下属性：它会漏掉 -webkit- 版本，或错误地认为已原生支持。必须显式写出带前缀的声明，并确保无前缀版本紧随其后（浏览器按顺序取第一个有效值）：
-
display: -webkit-grid+display: grid（Safari 10.1 不识别无前缀grid） -
grid-gap→ 必须写-webkit-grid-gap，且不能只写这个（否则 Chrome/Firefox 会忽略） -
grid-template-columns和grid-template-rows中的minmax()、fit-content()在 Safari ≤10.1 中基本无效，fr单位表现不稳定，建议改用px或% -
justify-items/align-items需配-webkit-justify-items/-webkit-align-items，但注意 Safari 10.1 对stretch值支持异常，有时需显式设为start
如何安全使用 grid-template-areas 在旧 Safari 中
这个属性在 Safari ≤10.1 完全不支持，无论加不加前缀。强行使用会导致整个 display: grid 声明失效（回退到 display: block），布局彻底崩坏。必须用其他方式模拟区域划分：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 用
grid-column/grid-row显式定位每个子元素（如grid-column: 1 / 3;），它们在 Safari 10.1 中可用（配合-webkit-前缀） - 避免在同一样式块中混用
grid-template-areas和grid-column—— Safari 会直接跳过整条规则 - 若必须保留语义化区域名，可在 JS 中检测
CSS.supports('display', 'grid')，动态切换 class，对旧 Safari 启用 Flexbox 降级布局
autoprefixer 配置不足以覆盖 Safari 10.1 的真实情况
即使把 browserslist 设为 safari 10，autoprefixer 仍不会为 grid-gap 输出 -webkit-grid-gap，也不会为 display: grid 补 -webkit-grid。这是它的设计限制（认为 Grid 前缀已过时）。必须人工干预：
立即学习“前端免费学习笔记（深入）”；
- 在构建流程中禁用 autoprefixer 对 Grid 相关属性的处理（通过
grid: false选项） - 所有 Grid 声明统一手写双版本：
-webkit-grid-gap: 12px;+grid-gap: 12px; - 用 PostCSS 插件如
postcss-grid-kiss或自定义插件批量注入前缀，比维护两套样式更可控 - 测试时务必在真机 Safari 10.1（macOS 10.12）上验证，模拟器和较新 Safari 的行为差异极大
最易被忽略的是：Safari 10.1 对 grid-area 的解析极其脆弱——哪怕多一个空格或换行，就可能让整个网格容器塌陷为普通块级元素。写的时候保持单行、无注释、无多余空格，上线前用 minify 工具二次校验。
