本文介绍一种简洁高效的 css grid 方案，通过 grid-auto-flow: column 和 grid-auto-columns: 100% 实现三个 div 水平并排、单屏仅显示第一个、其余内容可横向滚动的响应式布局，专为移动设备（max-width: 767px）优化。
本文介绍一种简洁高效的 css grid 方案，通过 grid-auto-flow: column 和 grid-auto-columns: 100% 实现三个 div 水平并排、单屏仅显示第一个、其余内容可横向滚动的响应式布局，专为移动设备（max-width: 767px）优化。
在移动端构建「主–详情–子详情」三级横向导航时，常见需求是：三个区域水平排列，但屏幕宽度仅够显示第一个区域，后两个区域需通过横向滚动查看。传统 grid-template-columns: 1fr 1fr 1fr 配合 width: 300% 的写法容易导致第二项部分溢出可视区（即“peeking”问题），根源在于显式列定义与容器宽度未对齐，且未启用真正的滚动流式行为。
推荐方案采用 隐式网格列流（implicit grid column flow），仅需两行关键 CSS 即可精准控制：
.fluid {
display: grid;
grid-auto-flow: column; /* 启用列方向自动布局 */
grid-auto-columns: 100%; /* 每个自动创建的列宽度 = 容器宽度（即单屏宽） */
border: solid red 1px;
overflow-x: scroll; /* 启用水平滚动 */
scroll-snap-type: x mandatory; /* 可选：增强滚动停靠体验 */
-webkit-overflow-scrolling: touch; /* iOS 平滑滚动支持 */
}
.fluid section {
height: 100px; /* 建议设置明确高度，避免塌陷 */
border: 1px solid #ccc;
flex-shrink: 0; /* 若同时兼容 Flex，此属性防压缩（Grid 中非必需但无害） */
scroll-snap-align: start; /* 配合 scroll-snap-type，实现精准分页滚动 */
}✅ 优势说明：
- 不依赖 grid-column 显式定位，避免手动计算列跨度带来的错位风险；
- grid-auto-columns: 100% 确保每个 section 独占一整屏宽度，天然隔离，杜绝“div2 peeking”；
- grid-auto-flow: column 让浏览器自动按 DOM 顺序从左到右生成列，语义清晰、维护性强；
- 完美适配 max-width: 767px 媒体查询，无需额外 hack。
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 必须为 .fluid 设置 overflow-x: scroll（或 auto），否则溢出内容不可见；
- 推荐为 section 设置固定高度（如 100px）或最小高度（min-height），防止因内容为空导致高度塌陷；
- 如需提升用户体验，可添加 scroll-snap-* 属性实现“吸附式”滚动（现代浏览器支持良好）；
- 在 iOS Safari 中，建议保留 -webkit-overflow-scrolling: touch 以启用原生惯性滚动。
该方案轻量、语义化强、兼容性好（支持所有现代浏览器及 iOS/Android 主流 WebView），是移动端横向分步视图的理想实践。
