核心解决思路是控制子项自身对齐行为并限制内容溢出表现：设 align-self: start/center 防撑高，配合 max-height: 100% 和 overflow: auto 实现安全滚动。
当 Grid 子元素内容过多导致高度超出父容器时，核心解决思路是：**控制子项自身对齐行为 + 限制其内容溢出表现**。单纯依赖 grid-template-rows 或 height 往往不够，需结合 align-self 和 overflow 协同处理。
明确子项在交叉轴（垂直方向）的对齐方式
align-self 决定单个网格项在其所在行（track）中的垂直对齐位置，但它不改变子项实际高度，只是调整其在分配空间内的摆放。常见取值：
- stretch（默认）：子项拉伸填满整行高度 → 若内容超长，会撑高整行，影响其他行
- start / end / center：子项按内容高度居顶/居底/居中，不拉伸 → 避免意外撑高，但内容仍可能溢出
- self-start / self-end：对齐到自身 margin 边界，适合有内边距场景
✅ 建议：若不想让某子项撑开网格行，显式设 align-self: start; 或 center;，再配合 overflow 控制内容。
用 overflow 控制内容溢出后的视觉表现
overflow 必须作用在子元素自身上（不是 grid 容器），才能裁剪或滚动其内部内容：
立即学习“前端免费学习笔记（深入）”；
-
overflow: hidden;—— 直接隐藏超出部分（简洁，适合卡片摘要类） -
overflow: auto;—— 仅在内容超限时显示滚动条（推荐，用户体验好） -
overflow-y: scroll;—— 强制显示垂直滚动条（避免布局跳动，但占位固定）
⚠️ 注意：若子项是 flex 容器或含绝对定位元素，需确保其 height 或 max-height 有约束（如 max-height: 100%;），否则 overflow 可能无效。
配合 max-height 实现“弹性截断”
仅靠 overflow 不够，还需给子项设定高度上限：
- 设
max-height: 100%;—— 让子项最大高度等于其所在网格行分配的高度 - 结合
align-self: start;防止 stretch 撑高，再加overflow: auto;实现安全滚动 - 示例：
.grid-item {
align-self: start;
max-height: 100%;
overflow: auto;
}
检查父容器是否设置了 grid-auto-rows 或 minmax
有时问题根源不在子项，而在网格轨道定义不合理：
-
grid-auto-rows: 1fr;会让所有隐式行等分剩余空间，但内容多的子项仍可能突破 - 更稳妥写法：
grid-template-rows: repeat(3, minmax(0, 1fr));—— 允许行收缩，避免过度拉伸 - 对特定行设固定高度：
grid-template-rows: 100px 1fr 200px;，再让子项适配
