直接用grid-template-rows: repeat(n, 100vh)做全屏滚动是错的，因其撑高容器、忽略gap、缩放错位、ios卡顿，本质是超长静态页而非滚动；scroll-snap-type生效需容器满足三条件：height: 100vh、overflow-y: scroll/auto、为普通块级元素（非body/html），且每子项须设scroll-snap-align: start。
直接用 grid-template-rows: repeat(n, 100vh) 做全屏滚动是错的——它撑高容器、忽略 gap、缩放错位、iOS 卡顿，根本不是“滚动”，只是个超长静态页。
scroll-snap-type 没生效？先看容器有没有被浏览器认作滚动上下文
浏览器只在满足三个硬条件时才启用 scroll-snap：
-
height: 100vh（不能是min-height，也不能靠内容撑高） -
overflow-y: scroll或auto（hidden禁滚动，visible不触发滚动上下文） - 必须是普通块级元素，比如
<div class="scroller">；写在 <code>body或html上等于白写常见错误：给
body加scroll-snap-type，再套一层section，但没给body设height和overflow——此时滚动仍是根元素行为，scroll-snap完全不介入。每屏子项必须显式设
scroll-snap-alignscroll-snap-type只是“开开关”，真正决定停在哪的是每个子项的scroll-snap-align：- 垂直全屏滚动用
scroll-snap-align: start（顶部对齐视口） - 想居中停驻，用
scroll-snap-align: center，但要求该子项height严格为100vh，否则锚点偏移 - 别用
margin-bottom分隔页面——它会让滚动距离 ≠ 视口高度，吸附点漂移；改用min-height: 100vh+box-sizing: border-box - 若子项内容超长导致自身高度 >
100vh，scroll-snap-align: start仍只锚定顶部，用户看到半截内容，此时应加overflow: hidden或限制内部高度
Grid 容器别写
grid-template-rows，改用grid-auto-flow: row全屏滚动的本质是“每个区块占据一个视口高度并 snap 到位”，不是靠 Grid 行高堆出来：
- Grid 容器设
display: grid+grid-auto-flow: row，不写grid-template-rows - 每个直接子元素（即每屏）设
height: 100vh+scroll-snap-align: start - 容器加
scroll-snap-type: y mandatory+overflow-y: scroll+height: 100vh - 必须清除
body { margin: 0 }，否则100vh被默认 margin 撑开，首屏就多出空白
如果非要用 Grid 控制视觉分屏，唯一安全替代是
grid-template-rows: repeat(n, 1fr)，但前提是容器有明确height: 100vh，且父级无margin/padding/border干扰。移动端卡顿、最后一屏被裁？这些细节漏一个就失效
iOS Safari 和 Chrome 120+ 上，
scroll-snap要稳定工作，必须同时满足：- 滚动容器加
touch-action: pan-y（横向轮播则用pan-x），否则系统可能拦截 touch 事件，绕过 snap 逻辑 - 删掉
-webkit-overflow-scrolling: touch（现代 iOS 已弃用，留着反而冲突） - 每个子项必须是
height: 100vh（不能用min-height或 flex 撑高），且不能有transform或will-change干扰布局层 - 启用
gap后最后一屏常被裁——浏览器会在末尾硬留一个gap高度，加负外边距抵消：margin-bottom: -0.5rem（对应gap: 1rem） - 刘海屏/全面屏需加
scroll-padding-top: env(safe-area-inset-top)，否则第一屏顶部被遮挡
真正难的不是写对几行 CSS，而是所有条件链式生效：
body margin清了，height设对了，overflow开了，scroll-snap-align每个子项都写了，touch-action加了，safe-area适配了——缺一环，滚动就滑过不停，或停不准、跳帧、截断。 - 垂直全屏滚动用
