用 CSS Grid 实现侧边栏固定宽高、主内容自动填充剩余空间，关键是父容器设明确高度（如 height: 100vh），用 grid-template-columns 或 rows 定义固定值与 1fr，侧边栏自身不设 height，主内容依赖 1fr 自适应。
侧边栏固定高度、主内容自动填充剩余空间，用 CSS Grid 实现很直接——关键是把容器设为 grid，用 1fr 让主区域“撑满”，侧边栏用固定值（如 300px）或 fit-content + 固定 height 控制，同时确保父容器有明确高度来源（比如视口高或显式 height）。
给网格容器设置明确高度
Grid 的 1fr 是按可用空间分配的，如果父容器没高度，1fr 就没意义。最常用的是让容器占满视口：
-
height: 100vh;—— 简单可靠，适合全屏布局 -
min-height: 100vh;—— 更灵活，内容超长时可滚动 - 或给父级设具体
height，比如height: 800px;
用 grid-template-rows 定义行高结构
若侧边栏需「固定像素高度」（比如头部导航），主内容填剩余空间，推荐这样写：
-
grid-template-rows: 60px 1fr;→ 第一行固定 60px（侧边栏 / 头部），第二行自动撑满 - 若侧边栏在左侧，就用
grid-template-columns: 240px 1fr;，其中240px是侧边栏宽度，1fr是主内容宽度 - 注意：这里「固定」指宽度或高度值写死，不是
height: 200px单独加在侧边栏元素上（那会破坏 Grid 的流式分配）
侧边栏自身不设 height，靠 Grid 分配控制
侧边栏元素本身一般 不要写 height，否则可能和 Grid 行高冲突。正确做法是：
- 让它自然内容高度，或用
min-height: 100%填满分配到的高度 - 如果真要强制固定高度（比如设计要求必须 500px），可设
height: 500px，但需确保父容器足够高，否则会溢出 - 更稳妥：用
max-height+overflow-y: auto，既控高又保内容可滚动
主内容用 1fr 自动伸缩，无需额外 height
1fr 就是“剩下的所有空间”，所以主内容区域只要：
- 不设
height（避免覆盖 Grid 分配） - 可加
overflow: auto，内容超长时内部滚动，不影响整体布局 - 如果主内容里有子元素需要 100% 高，记得祖先加
height: 100%或用display: contents等技巧穿透
基本上就这些。核心就是：容器有高 → Grid 划分明确 → 固定值写在 grid-template-* 里 → 内容区域交由 1fr 管理，不手动干预 height。
