本文介绍如何在移动端（≤767px）使用 css grid 实现三列水平排列布局，使首列默认显示、后两列隐藏于视口右侧，通过横向滚动查看，兼顾简洁性与兼容性。
本文介绍如何在移动端（≤767px）使用 css grid 实现三列水平排列布局，使首列默认显示、后两列隐藏于视口右侧，通过横向滚动查看，兼顾简洁性与兼容性。
在移动设备上构建「主–详情–子详情」三级横向导航时，常见需求是：初始仅显示第一个面板（如主列表），用户可向右滑动依次查看第二、第三个面板（如详情页与子详情页）。传统做法常误用 grid-template-columns: 1fr 1fr 1fr 配合 width: 300%，但这会导致网格项被强制拉伸、第二列部分“溢出可见”，破坏预期的单列初始视图。
✅ 正确解法是放弃显式列定义，改用自动列流（grid-auto-flow: column），配合 grid-auto-columns: 100% 让每个子元素独占容器全宽，并天然形成水平队列：
.fluid {
display: grid;
grid-auto-flow: column; /* 关键：让子元素沿列方向自动排列 */
grid-auto-columns: 100%; /* 关键：每列宽度 = 容器宽度（即 100vw） */
border: solid red 1px;
overflow-x: scroll; /* 启用横向滚动 */
scroll-behavior: smooth; /* 可选：提升滚动体验 */
-webkit-overflow-scrolling: touch; /* iOS 平滑滚动支持 */
}
.fluid section {
min-width: 100%; /* 确保不被压缩 */
height: 120px; /* 建议设置明确高度，避免塌陷 */
flex-shrink: 0; /* 若后续结合 Flex，此属性防收缩（Grid 中非必需但无害） */
border: 1px solid #ccc;
}HTML 结构保持极简，无需 ID 或额外类名：
<div class="fluid"> <section></section> <section></section> <section></section> </div>
? 为什么更优？
- grid-auto-flow: column 让 Grid 容器按需生成列（而非预先划分三等分），每个 <section> 自动成为一列，宽度由 grid-auto-columns: 100% 统一设定为容器宽度（即视口宽度），天然实现「单列满屏 + 横向滚动」效果；
- 不依赖 width: 300%，避免因盒模型计算误差导致第二列“偷露”；
- 兼容所有现代浏览器（Chrome 66+、Firefox 61+、Safari 11.1+），且在移动端 overflow-x: scroll 行为稳定；
- 语义清晰、代码精简，便于后续通过 JavaScript 控制滚动位置（如 element.scrollLeft = 100 * index）。
⚠️ 注意事项：
- 确保父容器（.fluid）未被其他样式（如 max-width、padding）意外限制宽度；
- 在媒体查询中启用该布局时，建议包裹于 @media (max-width: 767px) 内，并为桌面端回退为常规布局；
- 若需支持老版本 Safari（<11.1），可添加 -webkit- 前缀或降级使用 display: flex + flex-direction: row + min-width: 100% 方案（原理类似，但 Grid 更语义化）。
此方案以最少代码达成精准控制，是移动端横向分页布局的推荐实践。
