最简有效写法是grid-template-columns: 240px 1fr，其中1fr将剩余空间全给右侧，防溢出无兼容风险；需确保父容器有高度来源（如min-height: 100vh），子项用min-height: 100%而非height: 100%，并显式声明align-items: stretch以防拉伸失效。
grid-template-columns: 240px 1fr 必须写对
这是实现左侧固定、右侧自适应两栏且不塌陷的最简有效写法。别用 240px auto（右侧会随内容撑开）、也别混写 240px 100%（%在 Grid 中与 px 混用无定义行为）。1fr 不是百分比，而是“把容器减去 240px 后的剩余空间全部给它”，天然防溢出、无兼容风险。
- 确保父容器本身有高度来源：比如
min-height: 100vh或height: 100%（且其所有上层祖先不能是height: auto） - 不要在子项上写
height: 100%——容易触发循环依赖；改用min-height: 100% - 如果右侧主内容区用了
flex或嵌套grid，记得给它加min-width: 0，否则长单词或 URL 会撑宽整列，间接压缩1fr可分空间
align-items: stretch 是默认值，但常被悄悄覆盖
Grid 容器默认就拉伸子项填满行高，但这个行为极其脆弱。一旦你在任何层级写了 align-items: start、align-self: start，或者子项自身设了 height、max-height，拉伸立刻失效，视觉上就“塌陷”了。
- 显式声明
align-items: stretch在 Grid 容器上，不依赖默认（尤其团队协作时样式易被覆盖） - 检查 DevTools 的 Computed 面板：确认子项的
align-self是stretch，不是auto或其他值 - 子项内避免
position: absolute或display: contents——它们脱离文档流，不再参与拉伸计算
空容器塌陷？盯住 minmax(min-content, auto)
当主内容区暂时为空（比如加载中、API 返回空数组），grid-template-rows: 1fr 会退化为高度 0，因为“剩余空间”是 0。这不是 bug，是 fr 的设计逻辑。真正起作用的是下限约束。
- 把
grid-template-rows改成minmax(min-content, auto)，它强制该行至少容下文字行高、图标固有高这类最小自然尺寸 - 不要写
minmax(0, 1fr)——0 允许轨道压缩到不可见，反而加剧塌陷 - 若用了
grid-auto-flow: row dense，且子项高度差异大，首行可能仍塌，此时需显式定义多行轨道，或统一用grid-auto-rows: minmax(min-content, max-content)
滚动区域必须隔离，不能靠 overflow: hidden 补救
想让侧边栏固定、仅主内容区滚动？错误做法是给整个 Grid 容器加 overflow: hidden——这会截断侧边栏，或引发双滚动条。正确路径是明确控制谁滚、怎么滚。
- 只给主内容区（如
<main></main>）加overflow-y: auto和明确高度，例如height: calc(100vh - 60px) - 侧边栏保持自然流式高度，不设
overflow、不加position: sticky——Grid 列轨道已天然固定其位置 - 绝对不要给 Grid 容器设
overflow，哪怕只是想“兜底”，它会破坏列定位的底层机制
真正容易被忽略的是：塌陷往往不是单一 CSS 属性的问题，而是容器高度链路断了（body → layout wrapper → grid container）、子项脱离文档流、或 minmax() 写对了但子项压根没渲染出高度。调试时直接看 Computed 面板里子项的 height 和 min-height 是否大于 0，比反复调样式更快。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
