aspect-ratio: 1/1在Grid中常不生效，因其仅为后备推导规则，遇子项显式宽高、min-width、父容器固定行高（如grid-auto-rows: 200px）或align-items: stretch默认拉伸时即被跳过；须确保子项width: 100%、height: auto、无任何height相关声明，并配合弹性列定义如repeat(auto-fit, minmax(0, 1fr)))。
为什么aspect-ratio: 1 / 1在Grid里常不生效
它不是“强制执行”，而是“后备推导”——浏览器只在子项的宽高完全由布局上下文决定时才介入计算。一旦你写了height、min-height、width（哪怕只是min-width: 0），或者父容器用了grid-template-rows: 100px这类显式行高，aspect-ratio就静默退场。
常见现象：开发者工具里样式明明已应用，但格子被拉扁或撑高；最隐蔽的干扰来自align-items: stretch（Grid/Flex 默认值），它会强制子项填满行高，覆盖比例逻辑。
- 检查每个网格项是否写了
height、min-height、max-height（包括auto） - 确认父容器没设
grid-auto-rows为固定像素值（如200px），而应留空或用1fr - Grid 容器默认
align-items: stretch，需给子项加align-self: start释放控制权
grid-template-columns怎么写才不和aspect-ratio打架
用repeat(3, 1fr)本身没问题，但它只管列宽分配，不管行高——而aspect-ratio需要列宽作为计算基准。真正冲突的是那些“锁死宽度”的写法，比如200px 200px 200px，或子项上硬写width: 240px。
- 推荐列定义：
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)))——让列宽可响应、有下限，又不失弹性 - 避免在子项上写任何
width或flex-basis，只用width: 100%让它严格跟随所在列宽 - 若需精确列数（如固定3列），可用JS测量首个格子
offsetWidth后动态设grid-template-columns: repeat(3, [px]px)，彻底解除比例计算的不确定性
图片或文字内容导致格子溢出怎么办
aspect-ratio只管容器形状，不管里面内容怎么铺。一张没约束的图、一段换行失控的文字，都会把格子撑变形，甚至破坏整行高度一致性。
立即学习“前端免费学习笔记（深入）”；
- 图片必须套在带
aspect-ratio的容器内，而非直接设在<img alt="如何使用CSS Grid配合aspect-ratio维持正方形网格？" >上；内部img写width: 100%; height: 100%; object-fit: cover; - 文字内容加
overflow: hidden或text-overflow: ellipsis，配合display: -webkit-box多行截断 - 若某格子内容特别多，它会把整行顶高——纯CSS无解，需确保所有格子都参与
aspect-ratio计算（哪怕用空<div>占位），或用JS统一锁定列宽 <h3>旧浏览器降级方案怎么写才不破坏现代逻辑</h3> <p>Safari ≤ 15.3、微信X5内核等环境会静默忽略<code>aspect-ratio，结果是高度坍缩为0，而不是回退到其他行为。不能靠!important覆盖，必须结构分离。- 用
@supports not (aspect-ratio: 1)做唯一可靠检测，别信Modernizr或UA判断 - 降级结构必须是：
position: relative外层 +padding-bottom: 100%撑高 +position: absolute; top: 0; left: 0; width: 100%; height: 100%内容层 - CSS顺序关键：
aspect-ratio: 1 / 1必须在前，padding-bottom在后；反序会导致现代浏览器也失效 - SSR场景中，
padding方案可能闪动，而aspect-ratio无FOUC，这点常被忽略
contain: layout，某个CSS-in-JS库注入了不可见的min-h，或者box-sizing没设成border-box导致padding/border加在宽度外。 - 用
