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 明确声明头部跨行范围
先确保头部容器（如 <header> 或 <div class="header">）在网格中占据多行：
- 给头部设置
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; - 若头部跨2行，且每行高 48px，可设
top: 0（从顶部贴住）或top: -48px（向上偏移一行，适合部分重叠场景） - 必须保证其父容器有滚动容器（如设置了
overflow-y: auto的网格区域），且该父容器不能是transform或filter等会创建新层叠上下文的属性，否则 sticky 失效
常见陷阱与绕过方式
直接对 grid item 使用 sticky 在某些浏览器（尤其旧版 Safari）中表现不稳定：
- 推荐将多行头部整体包裹在一个子容器内，该子容器设为
display: contents（不产生盒模型），再让内部 wrapper 元素 sticky - 或改用
display: grid的子区域（如.header-area）作为 sticky 容器，内部用grid-row控制子项分布 - 避免在 sticky 元素上使用
margin或transform，它们可能破坏粘性行为
基本上就这些。grid-row 负责“它该占几行”，sticky 负责“它滚到哪都得露脸”——两者配合，多行表头就能稳稳停在顶部了。
