本文介绍一种简洁高效的 css grid 方案，通过 grid-auto-flow: column 和 grid-auto-columns: 100% 实现三个 div 水平并排、单屏仅显示第一个、其余内容可横向滚动的响应式布局，专为移动设备（≤767px）优化。
本文介绍一种简洁高效的 css grid 方案，通过 grid-auto-flow: column 和 grid-auto-columns: 100% 实现三个 div 水平并排、单屏仅显示第一个、其余内容可横向滚动的响应式布局，专为移动设备（≤767px）优化。
在移动端构建「主-详情-子详情」三级视图时，常见需求是让三个区域水平排列、初始仅显示第一个（如主面板），用户可通过左右滑动查看后续内容。传统 grid-template-columns: 1fr 1fr 1fr 配合 width: 300% 的方式易导致第二项部分溢出可视区（即“peeking”问题），根源在于显式列定义与容器宽度未对齐，且缺乏自动列尺寸控制。
推荐采用自动列流（Auto Flow Column）方案，仅需两行核心 CSS 即可精准解决：
.fluid {
display: grid;
grid-auto-flow: column; /* 启用列方向自动布局 */
grid-auto-columns: 100%; /* 每个 grid item 宽度 = 容器宽度（即单屏宽） */
border: solid red 1px;
overflow-x: scroll; /* 启用水平滚动 */
scroll-behavior: smooth; /* 可选：增强滚动体验 */
-webkit-overflow-scrolling: touch; /* iOS 平滑滚动支持 */
}
.fluid section {
height: 100px; /* 建议设置明确高度，避免塌陷 */
flex-shrink: 0; /* 若搭配 flex 回退方案时使用 */
border: 1px solid #ccc;
}HTML 结构保持极简，无需额外 class 或序号：
<div class="fluid"> <section id="div1"></section> <section id="div2"></section> <section id="div3"></section> </div>
✅ 优势说明：
立即学习“前端免费学习笔记（深入）”；
- grid-auto-flow: column 让浏览器自动按顺序将子元素逐列放置，无需手动指定 grid-column；
- grid-auto-columns: 100% 确保每个 <section> 宽度严格等于 .fluid 容器宽度（即视口宽度），三者总宽自然为 300vw，完美实现「一屏一区」；
- 配合 overflow-x: scroll，用户可流畅滑动浏览全部区域，无视觉错位或重叠。
⚠️ 注意事项：
- 必须为 <section> 设置明确高度（如 height: 100vh 或固定值），否则空 div 可能高度坍缩；
- 在移动端建议添加 -webkit-overflow-scrolling: touch 提升 iOS 滚动流畅度；
- 如需支持旧版浏览器，可提供 Flexbox 回退方案（display: flex; flex-wrap: nowrap; overflow-x: scroll + flex: 0 0 100%）；
- 若需禁用缩放干扰，可在 <meta name="viewport"> 中加入 user-scalable=no（谨慎使用，影响可访问性）。
该方案轻量、语义清晰、兼容性良好（Chrome 66+/Firefox 61+/Safari 12.1+），是移动端水平分页布局的理想实践。
