固定导航栏不能直接放入grid容器，须独立于其外并用grid-template-rows或margin-top预留空间；侧边栏同理需脱离grid、主内容区单独嵌套grid；主内容区须设高度与overflow-y: auto确保滚动正常。
grid布局中固定导航栏的常见错觉
很多人以为用 position: fixed 和 display: grid 能直接“融合”，结果导航栏盖住内容、滚动时内容从导航下穿过、或者网格轨道高度计算异常——根本原因在于 fixed 元素脱离文档流，grid 容器无法感知它的存在，也就不会为它预留空间。
顶部固定导航 + grid 主体的正确配合方式
核心思路：不把导航栏放进 grid 容器里，而是让它独立于 grid 外部，再通过 grid-template-rows 为内容区“手动腾出顶部空间”。
- 导航栏用
position: fixed; top: 0; left: 0; right: 0; z-index: 100;确保覆盖并固定 - grid 容器（比如
main或.layout）设margin-top: 64px（假设导航高 64px），或更稳妥地用grid-template-rows: 64px 1fr配合grid-row-start: 2让内容从第二行开始 - 务必给
body或根容器加padding-top: 64px，否则页面初始滚动位置会遮挡首屏内容
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 64px;
background: #fff;
z-index: 100;
}
<p>.layout {
display: grid;
grid-template-rows: 64px 1fr;
min-height: 100vh;
}</p><p>.content {
grid-row-start: 2;
padding: 1rem;
}侧边固定导航 + grid 主内容区的结构陷阱
侧边栏固定后，如果直接对父容器设 display: grid 并期望用 grid-template-columns 划分，容易忽略两个关键点：固定侧边栏不占网格轨道宽度、主内容区需避开其物理占据区域。
- 侧边栏仍用
position: fixed; top: 0; left: 0; width: 240px; height: 100vh; - grid 容器不能包裹侧边栏，应只包裹主内容区（如
.main-content），并设margin-left: 240px - 若想用 grid 控制主内容内部结构（比如三栏仪表盘），则在
.main-content内部再嵌套一层display: grid，与侧边栏完全解耦 - 避免对 body 直接设
grid-template-columns: 240px 1fr—— 这样侧边栏一旦 fixed，第一列就“消失”了，网格会塌成一列
滚动行为与 overflow 的隐蔽冲突
固定导航本身不滚动，但主内容区常需要局部滚动（比如侧边栏+可滚动主区）。此时若在 grid 容器上错误设置 overflow: hidden 或未限定高度，会导致内容被截断或滚动失效。
立即学习“前端免费学习笔记（深入）”；
- 给主内容区（如
.content）明确设height: calc(100vh - 64px)或max-height: calc(100vh - 64px) - 加上
overflow-y: auto，而不是依赖父级 grid 容器继承滚动 - 不要在
grid容器上设overflow: hidden，除非你明确要裁剪所有子项 - 注意 Safari 对
calc()在 grid track 中的支持较弱，复杂表达式建议改用 CSS 自定义属性或 JS 动态写入
真正麻烦的从来不是“怎么让导航固定”，而是“固定之后，怎么让 grid 知道它该躲哪儿、留多大空、别滚错地方”。这些间隙、偏移和层级关系，漏掉任意一个，页面就卡在半成品状态。
