grid-template-columns: 240px 1fr是最简可行写法，明确指定侧边栏固定240px、主内容占剩余空间；常见错误包括用auto或%混用、冗余minmax；主内容撑不满高度需检查根容器和Grid容器的高度锚定及对齐设置；滚动异常需为主内容设overflow-y:auto和高度约束；fr分配的是扣除gap与min-content后的剩余空间。
grid-template-columns: 240px 1fr 是最简可行写法
直接用 grid-template-columns: 240px 1fr 就能实现侧边栏像素级固定、主内容自动占满剩余空间。它不是“大概自适应”，而是明确告诉浏览器：第一列严格取 240px，第二列拿走容器宽度减去 240px 后所有可用空间。
常见错误包括：240px auto —— auto 会随内容收缩或撑开，导致主区域忽宽忽窄；240px 100% —— % 在 grid-template-columns 中无效，且与 px 混用时逻辑冲突；minmax(240px, 240px) 1fr —— 纯属冗余，旧版 Safari 还可能因此抖动。
主内容撑不满高度？问题不在 Grid 列定义
写了 240px 1fr 但 <main></main> 只包文字、不拉满容器高度，本质是高度链路断了，不是 Grid 本身的问题。
- 根容器（如
body或最外层包裹层）必须有高度来源：min-height: 100vh或height: 100%（且其父级不能是height: auto） - Grid 容器自身需设
min-height: 100%或height: 100%，否则1fr在垂直方向无参考基准 -
<main></main>若继承了align-items: start或显式设了align-self: start，会主动放弃占满高度，删掉即可
滚动行为异常：谁该滚，怎么滚
默认整个 Grid 容器一起滚动。若要侧边栏固定、仅主内容区域独立滚动，必须显式隔离。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- 给主内容区域（如
<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 的设计逻辑。真正容易被忽略的是：这个“min-content”由子元素内容决定，比如未设 table-layout: fixed 的 <table>、未设 <code>min-width: 0 的嵌套 flex 容器、或没控制换行的长 URL，都会悄悄抬高 min-content 基准，进而压缩 1fr 可用宽度。
