grid-template-columns: 300px 1fr 本身有效，但需确保高度链路完整（html/body→容器设100%高度）、主内容设overflow-y:auto并限定高度、避免align-self/justify-self干扰对齐。
直接写 grid-template-columns: 300px 1fr 就行，但光写这行不够——高度锚定、滚动隔离、对齐行为这三处不处理，布局大概率会“看起来没生效”。
为什么 grid-template-columns: 300px 1fr 本身没问题，但常被说“不生效”
浏览器完全理解这个声明，问题出在上下文缺失：1fr 是“剩余可用空间的一份”，但它不自动继承父容器高度；如果父容器高度是 auto（默认），1fr 在垂直方向就失去计算依据。常见现象包括：主内容区域只包裹文字高度、侧边栏和主体错位、整个网格塌成一行。
- 确保根级容器有明确高度来源，比如
html, body { height: 100%; }+ 布局容器设min-height: 100vh - Grid 容器自身必须设
height: 100%或min-height: 100%，否则1fr在列方向无意义 - 不要给主内容区域（如
<main></main>）加align-self: start或justify-self: start，它会主动放弃占满轨道
侧边栏固定但主内容要滚动？必须手动隔离 overflow
Grid 列轨道天然固定位置，但滚动行为不会自动分离。默认是整个 Grid 容器一起滚动，这不是你想要的。要让侧边栏钉在视口左侧、仅主内容可垂直滚动，得显式约束主区域：
- 给主内容元素（如
<main></main>）设overflow-y: auto - 同时给它一个明确高度上限，例如
height: calc(100vh - 60px)（减去 header 高度）或max-height: 100vh - 侧边栏本身不设
overflow，也不用position: sticky——Grid 已负责定位 - 绝对不要给 Grid 容器设
overflow，否则可能截断侧边栏或触发双滚动条
300px 能不能换成 minmax(240px, 300px)？看场景
如果侧边栏宽度需要弹性（比如小屏下缩窄、大屏下撑开），minmax() 是合理选择；但如果只是严格固定 300px，直接写 300px 更稳妥：
-
minmax(300px, 300px)和300px渲染结果一致，纯属冗余 - 旧版 Safari 对
minmax()嵌套fr（如minmax(240px, 1fr)）偶发渲染抖动，300px 1fr全版本稳定 - 未来若真要支持响应式缩放，直接改成
minmax(240px, 300px) 1fr即可，无需重构逻辑 - 别写成
300px 1fr 1fr——这会让主内容被强行切成两等份，违背单主体意图
真正容易被忽略的是高度链路：从 开始，每层父容器都得把高度透传下来，中间任何一层是 height: auto，1fr 就会失效。这不是 Grid 的 bug，是流式布局的基本事实。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
