grid-template-columns: 240px 1fr 失效的根源在于三处上下文缺失：未设高度锚点（html、body、容器需显式设高）、主内容未隔离滚动（需 height + overflow-y: auto）、未防内容撑开（主内容需 min-width: 0 及断行/表格约束）。
直接写 grid-template-columns: 240px 1fr 就能实现，但几乎一定失效——问题不在 Grid 语法本身，而在三处上下文缺失：高度锚点没设、滚动没隔离、内容防撑没做。
为什么 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 列轨道已天然固定位置
主内容区被长表格、URL 或图片撑开？
Grid 默认对子元素应用 min-width: auto，遇到长单词、URL、<table> 或未约束的图片时，会优先满足内容宽度，导致 <code>1fr 分不到空间，侧边栏被压缩甚至挤出视口。
- 给主内容区加
min-width: 0，强制它接受 Grid 轨道分配 - 含文本时补
word-break: break-word和overflow-wrap: break-word - 含
<table> 时加 <code>table-layout: fixed+width: 100% - 全局确保
* { box-sizing: border-box }，防止padding/border吃掉右侧可用宽度 - 在
@media (max-width: 767px)中，除了改列定义，必须加.sidebar { display: none; } - 别用
visibility: hidden，它仍占位；display: none才真正移出布局流 - 若需抽屉式滑出，改用
transform: translateX(-100%)+position: fixed，并确保z-index足够高
小屏下隐藏侧边栏，但内容仍被遮挡？
只改 grid-template-columns: 1fr 不够——侧边栏 DOM 仍在网格中占位，可能被挤进第一列、撑高容器或遮挡内容。
最易忽略的是：所有这些规则必须同时成立。少一个，240px 1fr 就只是句正确的废话。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
