grid-template-columns: 300px 1fr 本身有效，但常“不生效”是因为1fr需父容器有明确高度（如html, body { height: 100%; }及grid容器设min-height: 100vh），否则垂直方向无计算依据；还需隔离主内容滚动（overflow-y: auto+高度限制）、避免align-self: start干扰占满，并注意min-width: auto导致长内容撑开列宽。
grid-template-columns: 300px 1fr 为什么常“不生效”
浏览器完全理解这个声明，问题出在上下文缺失：1fr 是“剩余可用空间的一份”，但它不继承父容器高度。如果 html、body 或 Grid 容器自身没设高度来源，1fr 在垂直方向就失去计算依据。
常见现象包括：主内容只包裹文字高度、侧边栏和主体错位、整个网格塌成一行。
-
html, body { height: 100%; }必须写，否则根级无高度锚点 - Grid 容器需显式设
min-height: 100vh或height: 100%（且其父级不能是height: auto） - 避免给主内容区域加
align-self: start或继承align-items: start——它会主动放弃占满轨道
侧边栏固定、主内容独立滚动怎么配
Grid 列轨道天然固定位置，但默认滚动行为是整个容器一起滚。要让侧边栏钉住、仅主内容可垂直滚动，必须手动隔离 overflow。
- 给主内容元素（如
<main></main>）设overflow-y: auto - 同时给它一个明确高度上限，例如
height: calc(100vh - 60px)（减去 header 高度）或max-height: 100vh - 侧边栏本身不设
overflow，也不用position: sticky——Grid 已负责定位 - 绝对不要给 Grid 容器设
overflow，否则可能截断侧边栏或触发双滚动条
240px 还是 minmax(240px, 300px)？
如果侧边栏宽度需要响应式弹性（比如小屏缩窄、大屏撑开），minmax() 合理；但如果只是严格固定，直接写像素值更稳妥。
-
minmax(240px, 240px) 1fr和240px 1fr渲染结果一致，纯属冗余 - 旧版 Safari 对嵌套
minmax()+fr有渲染抖动，能避则避 - 混用
px和fr时注意顺序：100px 1fr 2fr合法，但1fr 2fr 300px中的300px会先占位，剩余才由 fr 分——这点容易误判实际宽度
主内容撑不满宽度？查 min-width 和 white-space
1fr 分配的不是“容器宽减 300px”，而是“容器宽减 300px、所有 gap、以及所有列的 min-content”后的空间。一个 white-space: nowrap 的长字符串就能撑大整列，压缩 1fr 可分空间。
- 主内容内若有长表格、图片或行内块元素，记得加
min-width: 0防止它撑大整列 - 避免对主内容区域设
width: 100%或max-width类样式，干扰fr计算 - 真正容易被忽略的是：fr 的“剩余空间”逻辑依赖于所有子项的内在尺寸，而不是单纯减法
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
