Grid布局中固定多行头部需结合grid-row与position:sticky：grid-row定义头部跨行范围（如grid-row:1/span2），position:sticky配合top实现滚动时固定显示，二者缺一不可。
Grid 布局中固定多行头部，核心不是靠 grid-row 单独实现“固定”，而是结合 position: sticky 与合理的网格结构来达成视觉上多行表头始终可见的效果。grid-row 的作用是定义某元素在网格中占据的行范围（比如 grid-row: 1 / 3 表示跨第1行到第3行之前），但它本身不提供滚动粘性；真正实现“固定”需配合 sticky。
用 grid-row 明确声明头部跨行范围
先确保头部容器（如 直接对 grid item 使用 基本上就这些。grid-row 负责“它该占几行”，sticky 负责“它滚到哪都得露脸”——两者配合，多行表头就能稳稳停在顶部了。
grid-row: 1 / span 2（占2行）或 grid-row: 1 / 3（从第1行起，到第3行开始前止）display: grid，且定义了至少2行（如 grid-template-rows: auto auto 1fr）grid-auto-rows 或隐式行高干扰，显式设定行高更稳妥让多行头部真正“固定”需 sticky + top 配合
grid-row 只管布局位置，滚动时固定靠 position: sticky：
position: sticky; top: 0;
top: 0（从顶部贴住）或 top: -48px（向上偏移一行，适合部分重叠场景）overflow-y: auto 的网格区域），且该父容器不能是 transform 或 filter 等会创建新层叠上下文的属性，否则 sticky 失效常见陷阱与绕过方式
sticky 在某些浏览器（尤其旧版 Safari）中表现不稳定：
display: contents（不产生盒模型），再让内部 wrapper 元素 stickydisplay: grid 的子区域（如 .header-area）作为 sticky 容器，内部用 grid-row 控制子项分布margin 或 transform，它们可能破坏粘性行为
