grid中无原生colspan/rowspan，仅能通过grid-area或grid-template-areas实现视觉单元格合并；前者适合动态跨行列场景，后者适用于语义化多层表头布局。
原生 colspan/rowspan 在 Grid 中根本不存在，也不能混用；真正能“合并视觉单元格”的只有 Grid 自身的区域控制机制——要么用 grid-area 显式指定行列范围，要么用 grid-template-areas 命名布局。二者选哪个，取决于结构是否固定、是否需要语义化命名。
用 grid-area 实现动态跨行跨列
适合表头或数据项位置明确、但列数可能变化的场景（比如动态字段报表）。直接通过行列线坐标定义占位：
-
grid-area: 1 / 2 / 3 / 5表示从第1行线到第3行线（跨2行）、第2列线到第5列线（跨3列） - 必须确保父容器已定义
grid-template-rows和grid-template-columns，否则隐式轨道高度/宽度不可控，容易错位 - 若某单元格内容换行撑高了自身行高，其他同层单元格不会自动对齐——Grid 不会像表格那样“联动拉伸”，需靠
align-items: stretch或显式设min-height - 错误现象：
grid-area值超出容器定义的轨道数时，浏览器静默忽略，元素回退到默认网格流位置，调试时容易漏掉
用 grid-template-areas 实现声明式多层表头
金融/BI 类复杂表头（如“大类→子类→字段”三层）强烈推荐此法。它把布局逻辑从 DOM 顺序中解耦出来：
- 每行字符串必须列数一致，空位用
.占位，例如："header header header header" "group1 group1 group2 group2" "field1 field2 field3 field4" - 每个
<div class="th"> 必须设置 <code>grid-area: group1等名称，不能依赖 HTML 出现顺序 - 命名区域一旦定义，
grid-template-rows可独立约束每层高度（如40px 32px 28px），避免内容拉高导致层级错位 - 常见坑：字符串里多一个空格、少一个引号、列数不一致，整个
grid-template-areas声明失效，所有子元素退化为默认网格流 - 要实现三层 sticky 表头，第一层设
top: 0，第二层top: 40px（等于第一层高度），第三层top: 72px（前两层高度和） - 必须给容器设
max-height和overflow-y: auto，否则sticky不触发 - 如果仍用
table+rowspan，滚动时合并单元格的 sticky 区域会撕裂或消失——这是浏览器渲染管线的固有限制，无法绕过
为什么不能和 position: sticky 共存？
原生表格的 colspan/rowspan 本质是 DOM 结构层面的合并，而 position: sticky 依赖的是渲染后的几何位置。Grid 的 grid-area 或 grid-template-areas 是布局阶段就计算好的视觉区域，二者天然兼容：
真正难的不是写对 grid-area，而是让设计师接受：表头结构必须在 CSS 里声明，而不是靠 HTML 的 rowspan 数字硬编码。一旦接受这点，后续响应式、打印、高 DPI 适配都会自然成立。
