最简且最稳的写法是 grid-template-columns: 240px 1fr，它使侧边栏固定240px、主内容占满剩余空间；常见错误包括用 auto 或 % 混用、冗余 minmax；主内容撑不满高度需检查高度链路；滚动异常需给主内容设 overflow-y: auto 和高度约束；fr 分配的是扣除 gap 和 min-content 后的剩余空间。
grid-template-columns: 240px 1fr 是最简且最稳的写法
直接写 grid-template-columns: 240px 1fr 就能实现侧边栏像素级固定、主内容自动占满剩余空间，无需包装、计算或 JS。它明确告诉浏览器：第一列严格取 240px，第二列拿走容器宽度减去 240px 后的所有可用空间。
常见错误包括：
-
240px auto→ 主内容会随内部文字或图片撑开，可能溢出或压缩侧边栏 -
240px 100%→ 在grid-template-columns中无效，% 按容器宽计算，与 px 混用时逻辑冲突，结果不可控 -
minmax(240px, 240px) 1fr→ 纯属冗余，等价于240px 1fr，还多一次解析，旧版 Safari 对嵌套minmax()+fr有渲染抖动
主内容区域撑不满高度？检查这三处
写了 240px 1fr 但主区域（如 <main></main>）只包内容、不拉满高度，问题不在 Grid 列定义，而在高度链路断了：
- 根容器（如
或布局包裹层）没设高度来源：min-height: 100vh或height: 100%（且父级不能是height: auto） - Grid 容器自身没设
min-height: 100%或height: 100%——1fr在垂直方向无参考基准时会退化 - 主内容区域写了
align-self: start或继承了align-items: start，删掉即可让它默认拉满高度
滚动行为异常：谁该滚，怎么滚
默认整个 Grid 容器一起滚动。若要侧边栏固定、仅主内容区域独立滚动，必须显式隔离：
- 给主内容区域（如
<main></main>）加overflow-y: auto和明确高度约束，例如height: calc(100vh - 60px) - 侧边栏本身不要设
overflow，也别加position: sticky—— Grid 已通过列轨道天然固定其位置 - 绝对不要给 Grid 容器设
overflow，否则会截断侧边栏或导致双滚动条 - 主内容内若有长表格或图片，记得加
min-width: 0防止它撑大整列，间接压缩1fr可分空间
真正容易被忽略的是 fr 的“剩余空间”计算逻辑
1fr 分配的不是“容器宽度减去 240px”，而是“容器宽度减去 240px、所有 gap、以及所有列的 min-content”后的空间。哪怕你写了 240px 1fr，只要主内容区有个 white-space: nowrap 的长字符串，它就可能把整行撑宽，让 1fr 实际可分空间变小——这不是 bug，是 fr 的设计逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
