grid-area实现非矩形合并的本质是视觉层叠覆盖而非DOM合并，需将table设为display:grid并定义grid-template-areas，移除所有colspan/rowspan，通过命名区域拼接L/T形结构，注意语义与兼容性风险。
grid-area 合并单元格的本质是绕过 <td> 的 DOM 结构限制
HTML 原生的 colspan 和 rowspan 只能做矩形合并，而 grid-area 实现的是“视觉层叠覆盖”，不是真正合并 DOM 节点。这意味着：表格结构仍需保持完整（比如每行仍要有 4 个 <td>），但通过 CSS 把某些单元格设为 display: contents 或用 grid-area 定位到同一区域，让它们视觉上重叠或留空。
关键前提：必须把 <table> 设为 display: grid，且显式定义 grid-template-areas；<tr> 和 <td> 不再承担布局职责，仅作语义容器。
- 不能直接对
<td rowspan="2">加grid-area—— 它会和原生属性冲突，浏览器行为不可靠 - 必须移除所有
colspan/rowspan，否则 grid 布局会被干扰 -
grid-template-areas的字符串每一行对应表格一行，每个单词对应一个命名区域（如"a a b c"表示第一列两个单元格都属于a）
如何用 grid-area 实现 L 形、T 形等非矩形合并
没有“L 形区域”这种内置语法，得拆解成多个矩形区域拼接，并控制单元格内容是否渲染。例如实现左上角 2×2 单元格 + 右侧延伸一格的 T 形头：
grid-template-areas: "head head head" "left left right" "left bottom right";
然后给对应 <td> 设置 grid-area: head、grid-area: left 等。注意第三行第一个 <td> 也要设 grid-area: left，它和第二行前两个一起构成“左区”，但内容只在第一个单元格里写，其余设 visibility: hidden 或 display: none（后者会影响 grid 占位，慎用）。
立即学习“前端免费学习笔记（深入）”；
- 命名区域名必须全小写、无空格、不以数字开头（如
cell-1合法，1cell不合法） - 同一
grid-area值可被多个<td>使用，但只有第一个有内容的单元格可见，其余默认堆叠在底层 - 若需突出某区域，可用
z-index控制层叠顺序，但需确保父容器是定位上下文（如加position: relative）
兼容性与语义陷阱：哪些浏览器不支持？哪些屏幕阅读器会误读？
display: grid 在 <table> 上的支持从 Chrome 85、Firefox 70、Safari 16.4 开始稳定，但旧版 Safari（≤15.6）会忽略 grid-template-areas 并回退为原生表格布局 —— 此时 grid-area 完全无效，且无报错。
更严重的是语义问题：<table> 的 ARIA 语义（如 role="table"）依赖 <tr>/<td> 的嵌套结构。一旦用 display: grid，部分屏幕阅读器（尤其是 NVDA + Firefox 组合）可能无法正确播报行列关系，把“合并区域”识别为独立碎片。
- 无障碍替代方案：用
aria-describedby手动关联描述，或改用<div role="table">+ 自定义 grid 区域（牺牲原生表格语义换灵活性） - 不要依赖
grid-area做数据对齐 —— 表格的核心价值是行列数据关联，视觉错位易导致导出 CSV 或打印时错乱 - 测试时务必打开系统级屏幕阅读器，检查“当前行/列号”是否连续、跳转是否符合预期
grid-area 和 grid-column/grid-row 混用的风险
可以混用，但顺序和优先级容易踩坑。当同时设置 grid-area: "a" 和 grid-column: 2 / 4 时，后者会被忽略 —— grid-area 是 shorthand，会覆盖 grid-row、grid-column、grid-row-start 等所有子属性。
常见误用场景：想让某个单元格横跨两列，又希望它属于某个命名区域，结果只写 grid-area: "a"，没在 grid-template-areas 里把对应位置重复写两次（如 "a a b"），导致实际只占一格。
- 调试技巧：用浏览器开发者工具检查 computed styles，确认
grid-row-start和grid-column-start是否与预期一致 - 避免动态生成
grid-template-areas字符串 —— 换行符、多余空格会导致解析失败，建议用模板字符串并.replace(/\s+/g, " ").trim()清理 - 如果区域数量多、变化频繁，优先考虑用
grid-column/grid-row显式定位，比维护一长串字符串更可控
grid-template-areas 得配套写多套媒体查询，而原生 colspan 无需额外处理 —— 这个成本得提前算进去。 
