grid-area命名区域在IE及旧版Safari/Firefox中完全不支持，应改用line-based定位（如grid-row: 1 / 3），显式声明四值、避免span语法、注意行号从1开始，并为IE11单独提供-ms-grid方案。
grid-area命名在旧版浏览器里根本不起作用
CSS Grid 的 grid-area 命名区域（比如 grid-area: header;）依赖 grid-template-areas，而这个特性在 IE 完全不支持，Safari 10.1 之前、Firefox 52 之前也基本不可靠。不是“部分兼容”，是压根解析不了那行声明。
真正能落地的兼容方案，是绕过命名区域，改用 line-based 定位——也就是直接写行号，所有现代 Grid 浏览器都认这个，包括 Edge 16+、Chrome 57+、Firefox 52+，甚至 Safari 10.1 也支持（只要不用 grid-template-areas）。
实操建议：
- 把
grid-template-areas全部删掉，哪怕只用一次也会让老版本直接忽略整个display: grid块 - 所有子元素改用
grid-row-start/grid-column-end这类 line-based 属性定位 - 如果原布局有 4 行 3 列，就用
1 / 2 / 2 / 4这种row-start / column-start / row-end / column-end四值语法，别省略 - 避免混用命名 + 行号：比如
grid-area: header / 2 / 3 / 4在 Safari 11 会出错，必须统一风格
line-based定位时行号从1开始，且不能为0或负数
Grid 行列号是**从 1 开始计数**，不是 0。写 grid-row: 0 或 grid-column: -1 不仅无效，某些旧版 Safari 会直接丢弃整条规则，导致元素回退到文档流。
立即学习“前端免费学习笔记（深入）”；
常见错误现象：
- 元素突然堆在左上角——可能是写了
grid-row: 0，被忽略后按默认auto处理 - 整个网格塌陷成单列——可能误把
grid-template-rows: 100px 200px当作行号 0 和 1，结果用grid-row: 0 / 2定位失败 - Safari 10 显示空白——用了隐式行号（如
grid-row: span 2），但没配grid-row-start，它不支持纯span语法
实操建议：
- 显式写出全部四值，例如
grid-area: 1 / 1 / 2 / 4，比grid-row: 1 / 2; grid-column: 1 / 4更易维护 - 需要跨行时，用
grid-row: 1 / 3，而不是grid-row: 1 / span 2（后者在 Safari 10.1–11.0 有 bug） - 所有行号基于显式定义的
grid-template-rows和grid-template-columns，别指望自动推导隐式轨道
IE11 的 -ms-grid 是另一套规则，不能和 display: grid 混用
IE11 支持的是旧版 display: -ms-grid，它和标准 Grid **完全不兼容**：语法不同、行号含义不同、甚至 grid-column 这种属性在 IE 里压根不存在。试图用 @supports (display: grid) 包裹标准写法、再在外面写 IE 专用样式，往往会导致 IE 忽略所有 Grid 相关规则。
使用场景：
- 需要支持 IE11？那就得双写：一套
-ms-grid，一套标准display: grid，且两者必须独立生效 - 不能靠 autoprefixer 自动加前缀——它对
-ms-grid的转换极不可靠，尤其涉及-ms-grid-row-span和行列对齐 - Flexbox 降级不是万能的：Grid 的二维布局能力（比如同时控制行列跨度）无法用 Flex 模拟，硬切会导致结构重写
实操建议：
- 用
@supports not (display: grid)单独给 IE 写-ms-grid规则，确保标准浏览器完全不读它 - IE 中
-ms-grid-row是起始行号，-ms-grid-row-span才是跨几行，和标准的grid-row: 1 / 3逻辑相反 - 测试重点放在 IE11 的
minmax()、fr单位——它只认px、%和固定数字，minmax(100px, 1fr)会被整个忽略
响应式中 grid-line 定位比命名区域更可控
用 grid-template-areas 做响应式，得为每个断点重写一整块字符串，容易漏掉空格、换行或引号，而且媒体查询里重复定义区域名会让 CSS 体积明显上升。而 line-based 定位只需调整几个数值，逻辑清晰，压缩率高。
性能与兼容性影响：
- 浏览器解析
grid-row: 2 / 4比解析"header header header"字符串快得多，尤其在大量 Grid 子项时 - PostCSS 插件（如
postcss-grid-kiss）能帮你把可视化布局转成 line-based 代码，但别让它生成命名区域——那又回到兼容性黑洞 - 如果用 CSS-in-JS（比如 Emotion），直接把行号当变量传入，比拼接字符串安全得多：
gridRow: `${startRow} / ${endRow}`
容易被忽略的地方：line-based 定位本身不解决「内容溢出」问题。当某区域内容高度超出预设行高时，后续区域不会自动下移——这和命名区域的行为一致，得靠 minmax() 或 auto 行高兜底，而不是指望行号自适应。
