本文介绍如何在移动端（max-width: 767px）下，使用 css grid 实现三个等宽 div 水平并排、单屏仅显示第一列、其余两列通过横向滚动查看的响应式布局，解决第二列意外“透出”可视区域的问题。
本文介绍如何在移动端（max-width: 767px）下，使用 css grid 实现三个等宽 div 水平并排、单屏仅显示第一列、其余两列通过横向滚动查看的响应式布局，解决第二列意外“透出”可视区域的问题。
在移动端构建「主–详情–子详情」三级横向导航时，常见需求是：初始只显示第一个面板（如主视图），用户左右滑动切换后续内容。此时若使用 grid-template-columns: 1fr 1fr 1fr 配合 width: 300%，容易因浏览器渲染逻辑或盒模型计算导致第二列部分可见（即“peeking through”），破坏单屏聚焦体验。
推荐解法：采用自动列流（grid-auto-flow: column）替代显式列定义
该方案更语义清晰、行为可控，且天然适配动态子项数量：
.fluid {
display: grid;
grid-auto-flow: column; /* 子元素按列方向自动排列 */
grid-auto-columns: 100%; /* 每一列宽度 = 容器宽度（即单屏宽度） */
border: solid red 1px;
overflow-x: auto; /* 启用横向滚动（推荐用 auto 而非 scroll，避免空滚动条） */
scroll-behavior: smooth; /* 可选：启用平滑滚动 */
-webkit-overflow-scrolling: touch; /* iOS 滚动优化 */
}
.fluid section {
flex-shrink: 0; /* 若后续混用 flex，此行可防压缩（但 grid 下非必需） */
height: 120px; /* 建议设置明确高度，避免塌陷 */
min-width: 100%; /* 确保每项至少占满一屏宽度 */
border: 1px solid #ccc;
}✅ 优势说明：
- 不依赖 grid-column 手动定位，消除列序错位风险；
- grid-auto-columns: 100% 精确控制每列宽度为容器宽度（即视口宽度），三列总宽自动为 300vw，完美匹配滚动容器；
- 支持任意数量子项，新增 <section> 无需修改 CSS；
- 兼容所有现代浏览器（Chrome 57+、Firefox 52+、Safari 10.1+、Edge 16+）。
⚠️ 注意事项：
- 移动端需确保父容器无意外 padding 或 margin 干扰宽度计算；
- 若需禁用缩放干扰滚动，可在 <meta name="viewport"> 中添加 user-scalable=no（谨慎使用，影响可访问性）；
- 如需精确控制滚动起始位置（如默认停在第一列），可通过 JavaScript 初始化 element.scrollLeft = 0 或使用 scroll-snap-type（见进阶扩展）。
? 进阶提示（可选）：
为提升用户体验，可添加滚动吸附效果：
.fluid {
scroll-snap-type: x mandatory;
}
.fluid section {
scroll-snap-align: start;
}这样用户松手后滚动会自动对齐到最近的面板边缘，实现“卡片式”切换体验。
