grid 容器本身不触发滚动条，因它仅定义布局而不产生滚动行为；滚动取决于内容是否溢出及容器 overflow 设置，美化需作用于实际滚动的外层容器而非 grid 本身。
直接给 grid 容器加 ::-webkit-scrollbar 无效——滚动条根本不出现在 grid 上，而是出现在其父容器或视口上。
为什么 grid 容器本身不触发滚动条
Grid 布局本身不产生滚动行为；它只是定义轨道和项目位置。滚动是否出现，取决于「内容总宽/高是否超出容器尺寸」+「容器是否设置了 overflow」。常见误解是给 .grid 类加 overflow-x: auto 就能滚，但实际中：
- 若子项用
minmax(280px, 1fr)+auto-fit，浏览器会自动压缩列数，通常不会溢出 → 滚动条压根不出现 - 若强行设
white-space: nowrap或固定列宽（如repeat(12, 100px)），且容器宽度不够，才会触发横向滚动 —— 但此时滚动的是该容器，不是 grid 本身 -
::-webkit-scrollbar只对「实际产生滚动的块级元素」生效，比如包裹 grid 的<div class="scroll-wrapper"> <h3>想让响应式栅格支持横向滚动 + 美化，必须分层控制</h3> <p>典型结构是：外层滚动容器 → 中间 grid 容器 → 内部卡片/项目。美化目标是外层容器的滚动条，而非 grid。</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a> <p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li>外层容器需显式设 <code>overflow-x: auto、display: block、-webkit-overflow-scrolling: touch（iOS 流畅性） - grid 容器本身不设
overflow，只负责布局，例如：display: grid; grid-template-columns: repeat(12, minmax(200px, 1fr)); gap: 1rem; - 美化代码必须写在外层容器选择器下，例如：
.scroll-wrapper::-webkit-scrollbar { width: 8px; } - 别忘了降级：Firefox 不支持
::-webkit-scrollbar，可加scrollbar-width: thin和scrollbar-color: #666 #eee
常见错误：美化了 body 或 html 的滚动条
很多人把自定义滚动条样式写在 html 或 body 上，结果改的是整个页面的纵向滚动条，跟栅格横向滚动完全无关。
- 检查 DevTools 的 computed 样式，确认
overflow-x: auto确实作用在你写的那个<div> 上 <li>如果该容器高度/宽度没约束（比如 <code>width: 100%但父级没定宽），它可能无限撑开，导致不滚动 - 移动端 Safari 对
overflow-x+ flex/grid 混用较敏感，建议外层容器加will-change: scroll-position防卡顿 - 避免在 grid 容器上同时设
overflow和gap，旧版 Safari 可能渲染错位
真正要控制的，从来不是 grid 的“样式”，而是谁在滚、往哪滚、怎么滚得顺——滚动条美化只是表象，底层结构决定它能不能被选中、被定制。
