grid-template-columns: 240px 1fr 仅定义列宽，需补全三处：Grid容器设min-height: 100vh、主内容加overflow-y: auto与height约束、小屏下侧边栏用display: none彻底移出文档流。
光写 grid-template-columns: 240px 1fr 不会自动让侧边栏“固定”、主内容“自适应”——它只定义列宽，高度、滚动、响应式全靠额外三处补全。
为什么 grid-template-columns: 240px 1fr 看起来没生效
浏览器完全解析了这行 CSS，1fr 也没错。问题在于：它只分配水平空间，不提供垂直约束。侧边栏高度塌陷、主内容不占满、滚动异常，90% 都是高度链路断裂导致的。
-
html和body默认height: auto，Grid 容器拿不到高度基准 - Grid 容器自身没设
min-height: 100vh（用height: 100%易在嵌套中中断） - 侧边栏或主内容加了
align-self: start，覆盖了默认的stretch行为 - 主内容区内部嵌套了 Grid/Flex，其子元素触发
min-width: auto，撑开父容器导致overflow-y: auto失效
主内容独立滚动必须满足两个硬条件
侧边栏固定 ≠ 主内容能滚。Grid 列轨道只管定位，滚动行为得手动收束到主内容区域本身。
- 给主内容元素（如
）加overflow-y: auto - 同步设置明确高度上限：
height: calc(100vh - 60px)（减去 header 高度），或max-height: 100vh - 绝对不要给 Grid 容器设
overflow——否则要么截断侧边栏，要么出现双滚动条 - 主内容区加
min-height: 0，必要时其直接子容器也加min-width: 0或min-height: 0，防止隐式最小尺寸撑开
小屏下隐藏侧边栏，display: none 是唯一可靠方式
只改 grid-template-columns: 1fr 或用 visibility: hidden 都不行：DOM 节点仍在网格中占位，可能被挤进第一列、遮挡内容、或撑高容器。
- 在
@media (max-width: 767px)中，必须同时写：.sidebar { display: none; } - 如果要做抽屉式滑出，改用
transform: translateX(-100%)+position: fixed，并确保z-index足够高 - 若用
grid-template-areas，小屏可切换为"main" "sidebar"实现垂直堆叠，但依然要配display: none才真正移出流
真正卡住的从来不是 1fr 写错了，而是某个父级悄悄用了 height: auto，或者某个 在窄屏下因默认 min-width 撑爆侧边栏——这些地方不报错，但布局就是不对劲。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
