使用css grid构建移动端全屏分屏滑动效果，核心在于将容器设为`display: grid`并定义两列布局（如`grid-template-columns: 100% 100%`），配合`overflow-x: auto`启用水平滚动，同时利用`scroll-snap-type: x mandatory`和子元素的`scroll-snap-align: start`实现吸附滑动。这样无需javascript即可在移动端获得原生的、流畅的分页滑动体验。
CSS Grid如何定义全屏双列布局
CSS Grid通过`grid-template-columns`属性可以精确控制列的宽度。要实现分屏效果，只需将容器的列宽都设置为100%，这样每一“屏”都会占据整个视口宽度。结合`height: 100vh`确保每屏高度填满屏幕，就能构建出基础的全屏框架。
/* HTML结构示例 */
<div class="slider-container">
<div class="slide">第一屏内容</div>
<div class="slide">第二屏内容</div>
<div class="slide">第三屏内容</div>
</div>
/* CSS样式 */
.slider-container {
display: grid;
grid-template-columns: 100% 100% 100%; /* 三列，每列占满屏幕 */
overflow-x: auto; /* 允许水平滚动 */
scroll-snap-type: x mandatory; /* 强制横向吸附 */
height: 100vh; /* 容器高度为视口高度 */
width: 100%;
}
.slide {
min-width: 100%; /* 确保每屏内容撑开对应列宽 */
height: 100%;
scroll-snap-align: start; /* 滚动停止时对齐左侧 */
display: flex;
justify-content: center;
align-items: center;
background-color: #f0f0f0;
}Scroll Snap如何实现平滑吸附
仅靠Grid布局只能实现静态排列，用户滑动时会停在任意位置。引入CSS Scroll Snap机制后，浏览器会自动计算滚动停止点。`scroll-snap-type: x mandatory`表示在X轴上必须吸附到最近的 snapping point。子元素设置`scroll-snap-align: start`后，每次滑动结束都会自动对齐到该元素的起始边缘，从而产生“咔哒”般的分页感。
立即学习“前端免费学习笔记（深入）”；
/* 增强版CSS，包含隐藏滚动条和优化体验 */
.slider-container {
display: grid;
grid-template-columns: repeat(3, 100%); /* 动态适应数量 */
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch; /* iOS平滑滚动 */
scrollbar-width: none; /* Firefox隐藏滚动条 */
height: 100vh;
}
/* 隐藏Chrome/Safari滚动条 */
.slider-container::-webkit-scrollbar {
display: none;
}
.slide {
min-width: 100%;
height: 100%;
scroll-snap-align: start;
/* 其他样式... */
}如何处理Grid中最后一屏未完全滑动的情况
当用户滑动距离不足一屏时，由于`mandatory`属性的存在，浏览器会强制回弹或吸附到最近的一屏。如果希望支持部分滑动预览（即不强制吸附），可将`mandatory`改为`proximity`。但在典型的全屏分屏场景中，`mandatory`是更优选择，因为它保证了每次交互都完整展示一屏内容，避免中间状态。此外，若需编程控制当前页码，可通过监听`scroll`事件并结合`getBoundingClientRect()`计算偏移量来实现。
