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。
先确保头部容器（如 <header></header> 或 <div class="header">）在网格中占据多行：
<ul>
<li>给头部设置 <code>grid-row: 1 / span 2（占2行）或 grid-row: 1 / 3（从第1行起，到第3行开始前止）
display: grid，且定义了至少2行（如 grid-template-rows: auto auto 1fr）grid-auto-rows 或隐式行高干扰，显式设定行高更稳妥grid-row 只管布局位置，滚动时固定靠 position: sticky：
position: sticky; top: 0;
top: 0（从顶部贴住）或 top: -48px（向上偏移一行，适合部分重叠场景）overflow-y: auto 的网格区域），且该父容器不能是 transform 或 filter 等会创建新层叠上下文的属性，否则 sticky 失效直接对 grid item 使用 sticky 在某些浏览器（尤其旧版 Safari）中表现不稳定：
display: contents（不产生盒模型），再让内部 wrapper 元素 stickydisplay: grid 的子区域（如 .header-area）作为 sticky 容器，内部用 grid-row 控制子项分布margin 或 transform，它们可能破坏粘性行为基本上就这些。grid-row 负责“它该占几行”，sticky 负责“它滚到哪都得露脸”——两者配合，多行表头就能稳稳停在顶部了。
以上就是Grid网格布局如何固定多行头部_使用grid-row控制头部跨行效果的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
653
