grid容器需设明确高度（如height:100vh或max-height）才能触发滚动，1fr依赖可用空间，父元素未设高度会导致轨道塌陷；滚动区必须是grid直系子元素，且内容宽度须严格大于容器可视宽度。
grid容器必须有明确高度才能触发滚动
很多局部滚动失效，根本原因是 grid 容器没设 height 或 max-height。1fr 不是魔法值——它只在“可用空间”存在时才起作用。如果父元素（比如 html、body）没设 height: 100%，或者容器本身没写 height: 100vh，那整个 grid 轨道就塌成 0，overflow-y: auto 形同虚设。
常见错误现象：tbody 区域撑开整页、表头跟着滚走、中间区域一动不动。
- 移动端慎用
100vh：Safari 地址栏收放会改变实际像素值，可改用100dvh（需检查兼容性） - 更稳妥的做法是给 grid 容器加
max-height: calc(100vh - 120px)，避开顶部导航和底部操作栏 - 如果容器由 flex 嵌套而来，注意
min-height: 0必须加在中间滚动区直系子元素上，否则 flex 默认最小尺寸会阻止滚动
滚动区必须是 grid 直系子元素
想让某个区域滚动，不能把它包在 div 里再塞进 grid；它得是 grid 容器的直接子元素。否则 position: sticky 锚定失败、overflow 作用域错位、列宽对齐全乱。
典型反例：<div class="grid"><table>
<thead>...</thead>
<tbody>...</tbody>
</table></div> —— 这里 <thead> 和 <code><tbody> 不是直系子项，sticky 失效。<ul>
<li>正确结构应为：<code><div class="grid-table">
<div class="thead"></div>
<div class="tbody"></div>
</div>
.tbody 需同时设 height: 100% 和 overflow-y: auto，且内部内容不能脱离文档流（避免用 position: absolute）scrollbar-gutter: stable both，防止滚动条出现时列宽跳变水平滚动要靠内容自然撑宽，不是靠父容器设 width
给 grid 容器设 width: 100vw 再配 grid-template-columns: repeat(7, 1fr)，看起来合理，但实际总宽 ≈ 100vw，没有溢出，scrollLeft 永远为 0，拖拽或 JS 控制都无效。
核心原则：滚动能力来自「内容宽度 > 容器可视宽度」，而不是 CSS 声明。
- 移除 grid 容器的
width声明，让它由子项自然撑开 - 把宽度逻辑下放到子项，例如用
@media (min-aspect-ratio: 1/1) { .item { width: calc(100vw / 7); } } - 确保子项总宽严格大于视口：7 × (100vw / 7) ≈ 100vw 是不够的，建议补 1–2px 误差余量，或用
min-width: calc(100vw / 7 + 1px) - 搭配
overflow-x: auto和-webkit-overflow-scrolling: touch提升 iOS 手势体验
三列水平滑动布局别用 template-columns，用 auto-flow
做「主-详情-子详情」这种单屏一列、左右滑动切换的布局，硬写 grid-template-columns: 1fr 1fr 1fr 加 width: 300% 很容易让第二列部分露头（peeking），而且响应式难调。
真正干净的解法只有两行：
.fluid {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 100%;
overflow-x: scroll;
}
.fluid > section {
height: 100vh; /* 必须设，空 div 会塌 */
}
-
grid-auto-flow: column让浏览器自动按顺序逐列排子项，不用手动指定grid-column -
grid-auto-columns: 100%确保每个section宽度 = 容器宽度（即视口宽），三者总宽就是 300vw - 别漏掉
-webkit-overflow-scrolling: touch，否则 iOS 滚动卡顿明显 - 如果某列内容高度不一致，统一用
min-height: 100vh替代height，避免拉伸失真
滚动行为是否生效，最终取决于 DOM 层面的内容宽度与容器可视宽度的数值关系，而不是你写了多少行 CSS。最常被忽略的是子项高度坍缩、父链高度缺失、以及滚动区非直系子元素这三点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
