place-items: center 与 overflow-y: auto 同时失效，根本原因是容器缺乏明确高度导致 1fr 轨道塌陷，且中间网格项缺少 min-height: 0 阻止默认最小尺寸限制滚动。
直接给容器设 place-items: center 并不能让内容居中+滚动同时生效——因为滚动需要明确高度上下文，而居中依赖轨道分配，二者冲突点就在中间区域的尺寸控制上。
为什么 place-items: center + overflow-y: auto 不起作用？
根本不是属性互斥，而是 place-items 会让子元素在网格轨道内居中，但若子元素本身没“撑满”或“溢出”分配到的空间，滚动条就不会出现。更常见的是：容器没设高度，1fr 轨道塌陷，overflow 形同虚设。
- 父级（如
html、body）没设height: 100%，导致grid-template-rows: 1fr计算出的高度为 0 -
place-items: center作用于所有直系子项，如果子项是块级且宽高自适应，它会缩成最小尺寸，没内容溢出自然不滚动 - 误把
overflow-y: auto写在子元素上，而不是 Grid 容器本身——滚动必须由容器触发
正确结构：用 grid-template-rows 分配空间 + 显式滚动区
想让顶部固定、中间滚动、底部固定，且整体内容垂直居中，得拆开控制：首尾用 auto，中间用 1fr 并单独加滚动逻辑。
- Grid 容器必须有明确高度，推荐
min-height: 100vh或height: 100dvh（防 Safari 地址栏跳变） - 写
grid-template-rows: auto 1fr auto，中间行占剩余全部空间 - 中间那个网格项（直系子元素）必须同时设
overflow-y: auto和min-height: 0——后者常被忽略，缺了它 flex 或 grid 的默认最小尺寸会阻止滚动 - 不要给中间项设
height: 100%，它会和1fr冲突；用max-height: 100%更安全
滚动条样式只在 WebKit 下可控，别强求统一外观
::-webkit-scrollbar 系列伪元素只能在 Chrome、Edge、旧版 Safari 上生效，Firefox 和 iOS Safari 基本无视。强行加兼容写法只会增加维护成本，还容易出错。
立即学习“前端免费学习笔记（深入）”；
- 必须给可滚动容器设
height或max-height，否则::-webkit-scrollbar选择器不匹配 -
::-webkit-scrollbar-thumb至少要有background-color，透明色 = 滑块不可见 - 别给
::-webkit-scrollbar-track加padding或border，极易遮挡滑块或导致错位 - 移动端真机基本退回系统默认样式，
scrollbar-width和scrollbar-color只支持颜色，不支持圆角/阴影/渐变
真正卡住人的从来不是怎么写 place-items，而是忘了 min-height: 0 这一行，或者在嵌套结构里把 overflow 写错了层级。调试时先看 computed height 和 overflow 层级，比反复改 CSS 更快。
