aspect-ratio 会绕过 grid-auto-rows 和 grid-template-rows 的高度控制，直接用“宽度×比例”计算高度，导致行被撑开或压缩；align-items: stretch 会覆盖 aspect-ratio，须显式设 align-self: start；列宽不确定时 aspect-ratio 静默失效，需用 minmax 提供宽度锚点。
aspect-ratio 会绕过 grid-auto-rows 和 grid-template-rows 的高度控制
它不是“覆盖”行高，而是直接跳过行高定义参与计算——当 grid-item 同时满足 aspect-ratio 可生效 + 宽度可算时，浏览器会忽略 grid-auto-rows: 200px 或 grid-template-rows: 1fr 对该 item 高度的约束，转而用“宽度 × 比例”推导出一个新高度。这个高度可能远大于或小于你设定的行轨道，导致整行被撑开或压缩。
常见现象：明明写了 grid-auto-rows: 120px，但某张图片格子却高 280px，还把下面所有行往下挤；或者用 repeat(3, 1fr) 定义三行，结果第一行被 aspect-ratio 拉高后，后面两行被压缩成一条线。
-
grid-auto-rows只设“最小行高”，不是强制上限；aspect-ratio推出的高度只要大于它，就会生效 -
grid-template-rows对显式定义的行有效，但若 item 高度超出该值，且没设overflow: hidden，依然会溢出并影响后续行布局 - 一旦某 item 触发
aspect-ratio计算，它就脱离了行轨道的“均分”逻辑，变成独立尺寸源
align-items: stretch 是静默破坏者
Grid 默认 align-items: stretch，它会让每个 item 拉伸填满所在行轨道高度。但 aspect-ratio 要求 item 高度由比例推导，不能被拉伸——两者冲突时，align-items: stretch 会赢，直接覆盖比例逻辑，导致格子被强行拉高、变形。
更麻烦的是：开发者工具里 aspect-ratio: 1 / 1 样式依然显示为“已启用”，但实际没生效，毫无报错提示。
立即学习“前端免费学习笔记（深入）”；
- 必须给每个 grid-item 显式加
align-self: start（或center、end），释放 stretch 控制权 - 不能只在容器上写
align-items: start——它会被单个 item 的align-self覆盖，但不写的话，stretch就默认生效 - 如果用了
grid-template-rows: 1fr且容器无明确高度，1fr会退化为auto，此时stretch更容易失控
列宽不可靠时 aspect-ratio 会 fallback 到自然高度
aspect-ratio 不是魔法，它需要一个确定的宽度作为计算基准。如果 grid-template-columns 写成 repeat(3, 1fr)，而父容器宽度又依赖内容（比如没设 width、也没在 flex 布局中分配空间），那 item 宽度就不可预测，aspect-ratio 就会静默失效，退回到内容自然高度——这时你看到的“行高不一致”，其实是部分格子按比例算、部分格子按文字/图片撑开，混合渲染的结果。
- 推荐列定义：
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)))—— 提供最小宽度锚点，又保留弹性 - 避免
repeat(3, 1fr)单独使用；如需固定列数，配合width: 100%和align-self: start才安全 - Bootstrap 的
col类若没带数字（如col-6），flex-basis: 0会导致宽度坍缩，aspect-ratio失效
图片或内容撑破格子，间接破坏行高一致性
aspect-ratio 只管容器形状，不管里面的东西怎么铺。一张没约束的 <img>、一段没截断的长文本，会突破格子边界，把整行顶高——这不是 aspect-ratio 的错，但它让“统一行高”彻底失效。
- 图片必须套在带
aspect-ratio的容器里，<img>自身设width: 100%; height: 100%; object-fit: cover; - 文字内容加
overflow: hidden或text-overflow: ellipsis，必要时用display: -webkit-box多行截断 - 若某格子内容特别多，其他格子即使有
aspect-ratio也会被它带偏——纯 CSS 无法隔离影响，只能靠结构对齐或 JS 统一列宽
aspect-ratio 本身，而是它和 Grid 行高机制之间那种“不报错、不警告、只悄悄失效”的协作关系。尤其当多个干扰条件叠加（比如 align-items: stretch + min-height: 0 + grid-auto-rows: 1fr），调试时得一层层排除，而不是盯着 aspect-ratio 本身改。 
