grid item 上设 overflow-y: auto 没反应，根本原因是父级行轨道未被约束：1fr 默认等价于 minmax(min-content, 1fr)，会撑开以容纳内容最小高度；必须改为 minmax(0, 1fr)，并确保 grid 容器有明确高度（如 height 或 max-height），才能使子项内部 overflow 生效。
grid item 上设 overflow-y: auto 没反应？检查父级行轨道是否真被约束
根本原因不是 CSS 写错了，而是 grid-template-rows 用 1fr 时默认等价于 minmax(min-content, 1fr) —— 它会优先撑开以容纳内容最小高度，导致子元素永远“不溢出”。滚动条只在内容真正超出可用空间时才触发。
必须把行轨道改成可收缩的：minmax(0, 1fr)。它允许轨道压缩到 0，把高度控制权交还给子元素内部的 overflow 行为。
-
grid-template-rows: 100px 1fr 80px→ 中间行会无限拉伸，哪怕内容超长也不滚动 -
grid-template-rows: 100px minmax(0, 1fr) 80px→ 中间行能收缩，子元素才能触发滚动 - 这个改动只有在 grid 容器本身有明确高度（如
height: 500px或max-height: 70vh）时才生效
给 grid item 直接加 height 和 overflow 还是不滚动？确认它是不是块级盒 + 高度没被拉伸
即使你写了 height: 300px; overflow-y: auto，如果该 item 的 align-self 是 stretch（默认值），而父轨道又没约束高度，它仍可能被撑开——此时 height 被忽略，overflow 失效。
更可靠的做法是：不在 item 上硬设 height，而在其内部嵌套一层 <div class="scroller">，并确保：<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11112" title="CSS工具箱(专业版)"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e352aa140.jpg" alt="CSS工具箱(专业版)" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11112" title="CSS工具箱(专业版)">CSS工具箱(专业版)</a>
<p>全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。</p>
</div>
<a href="/xiazai/skill11112" title="CSS工具箱(专业版)" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<ul>
<li>grid item 本身是块级（默认就是），且未设置 <code>align-self: center/flex-start 等干扰高度计算的值
.scroller 设 height: 100%; overflow-y: auto
grid-template-rows 对应的那行）已用 minmax(0, 1fr) 或固定值约束滚动条出现了，但内容被截断或位置偏移？注意滚动条真实占用宽度
滚动条不是视觉装饰，它会从容器 width 中扣除约 15–17px。当 grid 容器设为 width: 100% 且内容刚好填满时，滚动条一出现，所有 1fr 列宽都会同比例收缩，造成布局跳动。
这不是 Grid 特有，但在 Grid 中因尺寸联动强，更容易暴露。防御方式包括：
- 全局让垂直滚动条常驻：
html { overflow-y: scroll; }，再配body { width: 100vw; overflow: hidden; } - 局部处理：给 grid 容器加
padding-right: 17px，或用width: calc(100% + 17px); overflow-x: hidden占位 - Safari 旧版（iOS 15.3 及更早）可能丢弃
grid-template-areas，建议改用线号定位：header { grid-column: 1 / -1; grid-row: 1; }
为什么窄屏下整个页面横向滚动？和 Grid 有关，但根子在 body 默认边距
90% 的意外水平滚动，源头是浏览器给 body 设的默认 margin: 8px。这 16px 水平空间在窄屏下直接触发横向滚动条，哪怕你在 html 上写了 overflow-x: hidden 也无效。
必须显式重置：
body { margin: 0; padding: 0; box-sizing: border-box; }- Grid 子项加
min-width: 0（防止长单词/图片撑破列宽） - 图片等媒体元素补
max-width: 100%; height: auto; - 慎用
auto-fill，它可能生成过宽隐式轨道
height 或 max-height，就指望 1fr 自动产生滚动——这时整个轨道链都是塌陷的，overflow 根本没机会工作。
