css grid布局与固定导航栏_使用grid实现顶部或侧边导航_技术教程

固定导航栏不能直接放入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;
}
.layout {
display: grid;
grid-template-rows: 64px 1fr;
min-height: 100vh;
}
.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 动态写入