grid-template-columns: 240px 1fr 是最简可行写法，明确指定侧边栏固定240px、主内容占剩余空间；需配合 display: grid 和高度锚定（如 min-height: 100vh），避免使用 auto、% 或冗余 minmax。
直接用 grid-template-columns: 240px 1fr 就能实现——左侧固定 240px，右侧自动占满剩余宽度。这不是估算，而是浏览器严格按像素扣除后，把所有剩余空间全分给第二列。
基础写法与避坑要点
核心代码只需两行：
-
父容器设
display: grid和grid-template-columns: 240px 1fr - 确保父容器有明确高度锚定，比如
min-height: 100vh或继承自完整高度链
别写这些：
-
240px auto：auto 会随内容伸缩，主区忽宽忽窄 -
240px 100%：% 在 grid-template-columns 中无效，和 px 混用会导致逻辑冲突 -
minmax(240px, 240px) 1fr：纯属冗余，旧版 Safari 还可能抖动
高度拉不满？检查三处断点
写了 240px 1fr 却没撑满高度，问题不在列定义，而在高度链路断裂：
- 根容器（如
body或最外层包裹层）缺min-height: 100vh，或其所有父级是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 高度） - 侧边栏保持无
overflow、不加position: sticky——Grid 列轨道已天然固定位置 - 绝对不要给 Grid 容器本身设
overflow，否则会截断侧边栏或引发双滚动条 - 主内容内若有长表格、未换行文本，记得加
min-width: 0，防止它撑大整列、压缩1fr可分空间
小屏收起侧边栏的正确姿势
响应式收起不是只改列宽，而是让侧边栏真正退出布局流：
- 媒体查询中统一改为单列：
@media (max-width: 768px) { .container { grid-template-columns: 1fr; } } - 同时隐藏侧边栏：
.sidebar { display: none; }，避免它仍占位或错行 - 不用容器查询（@container）控制显隐——侧边栏属于页面级布局决策，必须依赖视口媒体查询
