align-self: stretch未拉伸的根本原因是网格轨道无确定高度，如grid-template-rows设为auto或容器无明确height；子项自身设height/min-height、内部flex未配flex:1等也会阻断拉伸。
align-self: stretch 看似生效但实际没拉伸？先确认它真在起作用
Grid 子项默认就是 align-self: stretch，但它不是“无条件拉满”，而是**只在所在网格轨道（grid track）有确定高度时才生效**。如果你看到子项高度参差不齐，大概率不是它失效了，而是轨道本身没高度可拉——比如 grid-template-rows: auto 或 grid-auto-rows: auto，此时轨道高度由内容决定，“拉伸”就变成“按内容高度显示”，视觉上和没设一样。
快速验证：打开开发者工具，选中子项 → 查看 align-self 计算值是否为 stretch；再看其所在行的轨道高度（Elements 面板里 grid container 的 Layout 标签页），如果显示 auto 或 min-content，那就是根源。
为什么写了 align-self: stretch 却还是不等高？常见干扰项
即使轨道有高度，align-self: stretch 也可能被子项自身样式覆盖或阻断：
-
height、max-height或min-height被显式设置（哪怕只是min-height: 0）——会直接禁用拉伸行为 - 子项内部用了
display: flex，但没配flex-direction: column和flex: 1，导致内容区不占满父容器高度 - 子项是空的，或只含 inline 元素（如纯文本无换行），其
min-height实际为0，拉伸后仍看不见高度 - 子项设置了
overflow: hidden，内容被裁剪后无法触发高度增长，看起来像“没撑开”
grid-auto-rows 和 grid-template-rows 怎么选才能让 stretch 生效
这是最容易混淆的点：align-self: stretch 对“隐式行”（由内容溢出自动创建的行）是否起作用，完全取决于 grid-auto-rows；对“显式行”（写死在 grid-template-rows 里的行），则取决于你写的值本身。
关键区别：
-
grid-auto-rows: auto→ 隐式行高度由内容定，stretch无效 -
grid-auto-rows: 1fr→ 所有隐式行均分剩余空间，stretch可填满整行（前提是容器有明确高度，如height: 600px） -
grid-template-rows: auto auto→ 每行仍由内容定高，stretch依然无空间可拉 -
grid-template-rows: 1fr 1fr→ 行轨道有确定尺寸，stretch正常生效
不想依赖 align-self，有没有更稳的等高方案
靠单个子项的 align-self 微调高度，不如从 Grid 容器层面统一约束。尤其当结构复杂、嵌套 Flex、或需兼容老浏览器时，以下组合更可靠：
- 给容器设
grid-auto-rows: minmax(0, 1fr)（注意minmax(0, )中的0是关键，防止 flex 子项收缩塌陷） - 配合
height或min-height明确容器高度，确保1fr有计算依据 - 子项内图片统一加
height: 100%; object-fit: cover;，文字区域用display: -webkit-box; -webkit-line-clamp: 2;控制行数 - 避免在子项上写
height: 100%——它依赖父级轨道有像素高度，而轨道若为auto，这个百分比就失效
真正容易被忽略的是：Grid 的拉伸能力不依赖子项写任何高度相关声明，只要轨道可控、子项不主动限制，stretch 就是静默生效的。手动加 align-self: stretch 不仅冗余，还可能掩盖轨道配置错误。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
