直接用grid-template-columns: 240px 1fr即可实现左侧固定240px、右侧占满剩余空间；需确保父容器有明确宽度和高度锚定，避免使用auto、%或冗余minmax，主内容需设overflow-y:auto及高度约束以实现独立滚动。
直接用 grid-template-columns: 240px 1fr 就能实现——左侧侧边栏固定 240px，右侧主内容自动占满剩余宽度。这不是“大概适配”，而是浏览器明确按像素扣减后，把所有剩下来的空间全给第二列。
核心写法与常见错误
最简且稳定的做法就是：
-
正确写法：
grid-template-columns: 240px 1fr—— 第一列严格 240px，第二列拿走扣除 gap 和 min-content 后的所有可用空间 -
别写
240px auto：auto 会随内容收缩或撑开，导致主区域忽宽忽窄 -
别写
240px 100%：% 在 grid-template-columns 中无效，和 px 混用时逻辑冲突、结果不可控 -
别套
minmax(240px, 240px) 1fr：纯属冗余，旧版 Safari 还可能因此渲染抖动
高度拉不满？查这三处断点
写了 240px 1fr 但侧边栏或主内容没撑满高度，问题不在列定义，而在高度链路断裂：
- 根容器（如
body或最外层包裹层）缺min-height: 100vh或height: 100%（且其所有父级不能是height: auto） - Grid 容器自身没设
min-height: 100%或height: 100%，导致1fr在垂直方向无参考基准 - 侧边栏或主内容显式写了
align-self: start，或父容器设了align-items: start，覆盖了默认的stretch行为
滚动行为要隔离，别让整个页面一起滚
想侧边栏固定不动、只让主内容区域独立滚动，关键在“收束”滚动容器：
- 给主内容元素（如
<main></main>）加overflow-y: auto和明确高度约束，例如height: calc(100vh - 60px)（减去 header 高度）或min-height: 100%（前提是高度链完整） - 侧边栏保持无
overflow、不加position: sticky—— Grid 列轨道已天然固定其位置 - 绝对不要给 Grid 容器本身设
overflow，否则会截断侧边栏或引发双滚动条 - 主内容内若有长表格、图片或未换行文本，记得加
min-width: 0，防止它撑大整列、压缩1fr可分空间
响应式收起侧边栏，别只改列宽
小屏下不能只把 grid-template-columns 改成 1fr，还要让侧边栏真正退出布局流：
- 媒体查询中统一改为单列：
@media (max-width: 768px) { .container { grid-template-columns: 1fr; } } - 同时隐藏侧边栏：
.sidebar { display: none; }，避免它仍占位或错行 - 不要用容器查询（
@container）控制显隐——侧边栏属于页面级布局决策，必须依赖视口媒体查询
