CSS Grid 实现固定侧边栏+可滚动主内容区的关键是补全三处上下文：高度锚点（html,body{height:100%}）、滚动隔离（主内容设overflow-y:auto+明确高度）、内容防撑（主内容min-width:0+word-break等）。
CSS Grid 实现固定侧边栏 + 可滚动主内容区，关键不在“怎么写 grid-template-columns”，而在于三处上下文是否补全：高度锚点、滚动隔离、内容防撑。
grid-template-columns: 240px 1fr 为什么没效果？
浏览器完全解析这行代码，但 1fr 是“剩余可用空间的一份”，它不继承父容器高度。如果 html、body 或 Grid 容器自身高度是 auto（默认值），垂直方向就无计算依据，导致主内容只包裹文字高度、两栏错位、网格塌成一行。
-
html, body { height: 100%; }必须写，否则根级无高度锚点 - Grid 容器（比如
.layout）要设min-height: 100vh或height: 100%，且其父级不能是height: auto - 避免给主内容区域（如
main）加align-self: start或继承align-items: start——它会主动放弃占满轨道
overflow-y: auto 在主内容区不出现滚动条？
不是 overflow-y 写错了，而是 Grid 没提供可滚动的上下文：overflow-y: auto 必须配合明确的高度约束才生效。Grid 只分配空间，不自动限高。
- 主内容元素（如
main）需同时设overflow-y: auto和height: calc(100vh - 60px)（减去 header 高度）或max-height: 100vh - 绝对不要给 Grid 容器设
overflow，否则可能截断侧边栏或触发双滚动条 - 侧边栏本身不设
overflow，也不用position: sticky——Grid 列轨道已天然固定位置
主内容区里有长表格或图片，布局被撑开？
Grid 默认对子元素应用 min-width: auto，遇到长单词、URL、<table> 或未约束的图片时，会优先满足内容宽度，导致 1fr 分不到空间，侧边栏被压缩甚至挤出视口。
立即学习“前端免费学习笔记（深入）”；
- 给主内容区加
min-width: 0，强制它接受 Grid 轨道分配 - 含文本时补
word-break: break-word和overflow-wrap: break-word - 含
<table>时加table-layout: fixed+width: 100% - 全局确保
* { box-sizing: border-box }，防止 padding/border 吃掉右侧可用宽度
小屏下隐藏侧边栏，但内容仍被遮挡？
只改 grid-template-columns: 1fr 不够——侧边栏 DOM 仍在网格中占位，可能被挤进第一列、撑高容器或遮挡内容。
- 在
@media (max-width: 767px)中，除了改列定义，必须加.sidebar { display: none; } - 别用
visibility: hidden，它仍占位；display: none才真正移出布局流 - 若需抽屉式滑出，改用
transform: translateX(-100%)+position: fixed，并确保z-index足够高
最易被忽略的是嵌套场景：主内容区内部再用 Grid 或 Flex 时，它的直接子元素常因 min-width: auto 撑开父容器，此时需手动给主内容区加 min-height: 0，必要时子容器也加 min-width: 0 或 min-height: 0。
