aspect-ratio: 1/1在Grid中不生效，因其仅为后备推导规则，遇子项显式宽高、min-width、父容器固定行高或align-items: stretch默认拉伸时即被跳过；须确保子项width: 100%、height: auto、无任何height相关声明，并配合弹性列定义如repeat(auto-fit, minmax(0, 1fr)))。
aspect-ratio 在 Grid 中不是“设了就生效”的样式，它只在子项宽高完全可推导时才介入计算——一旦有显式尺寸、拉伸行为或轨道锁定，它就静默退出。
为什么aspect-ratio: 1/1写在网格项上却没变方
最常见原因是浏览器根本没触发比例计算逻辑。它不是覆盖规则，而是后备推导：只要子项写了 height、min-height、width（哪怕 min-width: 0），或者父容器用了 grid-auto-rows: 200px 这类固定行高，aspect-ratio 就直接跳过。
- 检查每个网格项是否带
height、max-height、flex-basis或内联style="height:..." - 确认父容器没设
grid-template-rows或grid-auto-rows为像素值；留空或用1fr更安全 -
align-items: stretch是默认值，会强制子项填满行高——给子项加align-self: start阻断它
Grid 列定义怎么写才不压制aspect-ratio
硬写 grid-template-columns: 200px 200px 200px 或 repeat(3, 1fr) 看似合理，实则锁死了列宽来源，让 aspect-ratio 失去宽度基准。它需要列宽是“可变的”，才能反推高度。
- 用
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr))——auto-fill保证列数随容器变化，minmax()提供最小宽度但不锁死 - 避免在子项上写
width或flex-basis；只写width: 100%让它严格跟随所在列宽 - 若需固定列数（如必须三列），别靠 CSS 算，用 JS 测量首个格子
offsetWidth后动态设grid-template-columns: repeat(3, [px]px)
图片内容导致格子变形怎么办
aspect-ratio 只管容器形状，不管里面图片会不会撑开它。一张没约束的 <img>、一段没截断的文字，都会破坏比例一致性。
立即学习“前端免费学习笔记（深入）”；
- 把
aspect-ratio加在容器（如.grid-item）上，不是加在<img>上——<img>有固有宽高比，会优先覆盖 CSS 声明 - 容器设
aspect-ratio: 1/1; width: 100%; overflow: hidden，内部<img>写width: 100%; height: 100%; object-fit: cover - 文字内容要控制溢出：
line-clamp、text-overflow: ellipsis或用min-height: 0+display: flex+flex-direction: column配合margin-top: auto吸底
兼容性与降级的关键细节
Safari 15.4+ 才稳定支持 aspect-ratio，旧版会静默忽略，导致高度坍缩。降级不能只靠 @supports (aspect-ratio: 1)，因为 Safari 15.0–15.3 会误报支持。
- 检测要用
@supports not (aspect-ratio: 1)，fallback 方案用padding-top+position: absolute - 服务端应提供 ≥ 最小列宽（如 240px）的缩略图，否则图片会被拉伸变形
-
aspect-ratio约束的是 content box，若容器有大padding或border，整体尺寸会超出预期比例
真正起作用的组合非常窄：列宽必须可变、子项不能有任何显式高度声明、内容必须被约束在容器内——少一个条件，aspect-ratio 就只是开发者工具里一个静静躺着的 CSS 规则。
