grid-template-columns: 240px 1fr 无效是因为父容器缺乏高度约束，需同时设置 html、body{height:100%}，Grid容器设min-height:100vh，且主内容区避免align-self:start等导致未拉满行高。
grid-template-columns: 240px 1fr 为什么没效果
浏览器完全解析了这行声明，1fr 也没错——但 1fr 在垂直方向上根本没高度可分。它依赖父容器提供可用高度，而默认情况下 html 和 body 高度是 auto，Grid 容器自身若没设 min-height: 100vh 或 height: 100%，1fr 就只能按内容撑高，看起来像“没生效”。
必须同时满足三件事：
html, body { height: 100%; }- Grid 容器（比如
.layout）设min-height: 100vh（不用height: 100%，避免嵌套时继承中断） - 主内容区域（如
<main></main>）不带align-self: start或父级align-items: start，否则它主动放弃拉满行轨道
侧边栏固定但主内容要独立滚动
Grid 列轨道天然固定位置，但滚动行为不会自动分离。默认是整个 Grid 容器一起滚，侧边栏反而会被卷走或触发双滚动条。
正确做法是只让主内容区域自己滚：
立即学习“前端免费学习笔记（深入）”；
- 给主内容元素（如
<main></main>）加overflow-y: auto - 必须同步设一个明确高度上限，例如
height: calc(100vh - 60px)（减去 header 高度），或max-height: 100vh - 绝对不要给 Grid 容器设
overflow，否则可能截断侧边栏 - 侧边栏本身不设
overflow，也别加position: sticky——Grid 已通过列轨道定位好它了
小屏下隐藏侧边栏的正确写法
只改 grid-template-columns: 1fr 不够。DOM 节点还在网格里占位，侧边栏可能被挤进第一列、撑高容器，甚至遮挡内容。
必须配合显式移出布局流：
- 在
@media (max-width: 767px)中，除了改列定义，还要加.sidebar { display: none; } - 别用
visibility: hidden—— 它仍占位，display: none才真正移除渲染流 - 如果要做抽屉式滑出，改用
transform: translateX(-100%)+position: fixed，并确保z-index足够高
主内容区内部嵌套 Grid/Flex 时滚动失效
这是最易被忽略的点：主内容区（<main></main>）内部若嵌套了 Grid 或 Flex，它的直接子元素常因 min-width: auto 撑开父容器，导致 overflow-y: auto 失效——滚动条不出现，内容直接溢出。
解决方法很直接：
- 给主内容区加
min-height: 0 - 必要时，其子容器也加
min-width: 0或min-height: 0 - 用 DevTools 的 “Computed” 面板确认生效的
grid-template-columns确实是1fr，而不是被更具体的选择器覆盖
