grid容器需设明确高度（如height: 100vh）才能触发overflow-y: auto滚动；滚动条侵占空间可用scrollbar-gutter: stable both-edges修复；选中项触发全局滚动应设body为固定定位滚动根；移动端需加-webkit-overflow-scrolling: touch和contain优化性能。
Grid容器加了overflow-y: auto却没滚动条
根本不是CSS写错了，而是容器压根没“溢出”——overflow-y: auto只在内容高度 > 容器高度时才触发。Grid容器默认不设高，子项会把它顶高，永远不满足溢出条件。
必须给Grid容器本身加明确高度约束：
-
height: 100vh或max-height: 500px（别只靠flex: 1，它不生效） - 如果Grid嵌套在Flex链路里（比如
html → body → .wrapper → .grid），每一级都得有高度，缺一不可 - 避免用
height: 100%：它依赖父级content box高度，而Grid的gap不计入该高度，容易算错
滚动条把右边内容遮住了怎么办
这是滚动条宽度侵占了Grid轨道可用空间导致的，尤其在macOS或Windows默认滚动条较宽时明显。浏览器不会自动为滚动条预留位置，grid-template-columns照常按100%分配，结果最后一列被挤窄甚至换行。
修复方式分两层：
- 给Grid容器加
padding-right: 16px（或用calc(100% - 16px)控制列宽），手动腾出滚动条空间 - 更健壮的做法是启用滚动条“内嵌”模式：
scrollbar-gutter: stable both-edges（Chrome 94+、Safari 16.4+支持），它会自动保留滚动条槽位，不挤内容 - 降级兼容：对老浏览器加
overflow-y: overlay（仅WebKit），但注意它已被逐步废弃，慎用
选中Grid项后页面突然全局滚动
这不是Grid的问题，是浏览器隐式调用了 element.scrollIntoView()。当Grid项是可聚焦元素（比如带tabindex的<div>或<code><button></button>），点击后浏览器会尝试把它滚进视口——而Grid容器设置了max-height和overflow-y: auto，但没形成滚动锚点上下文，于是向上追溯到，整页就往下跳了。
关键修复点在：
- 加
position: fixed; top: 0; width: 100%; height: 100%; overflow: auto - 这会让
成为滚动根容器，所有scrollIntoView行为都被限制在它内部 - 注意：必须显式设
width和height，否则position: fixed会塌缩
移动端滚动卡顿、内容被导航栏遮挡
iOS Safari对overflow-y: auto容器的滚动优化很弱，尤其当Grid项里有图片、动画或复杂文本时，容易掉帧，还可能被底部地址栏/导航栏切掉底部内容。
实操要点：
- 给滚动容器加
-webkit-overflow-scrolling: touch（iOS 16前必需，16+可选） - 确保滚动容器父级有明确
height，且自身设min-height: 0（修复Safari Flex/Grid子项最小尺寸bug） - 避免在Grid项里用
width: 100vw：它按整个视口算，不随Grid容器收缩，极易破框并触发横向滚动
最易被忽略的是：滚动容器的contain: layout paint能显著提升性能，但它会切断与外部滚动锚点的联系——如果同时用了scroll-behavior: smooth，得统一挂到上，否则平滑滚动失效。
