aspect-ratio: 1/1 在 Grid 中常不生效，因其是后备推导规则而非强制样式；需满足宽度可算、高度未被锁死、align-self: start、width: 100% 且无任何 height 相关声明。
aspect-ratio: 1 / 1 在 Grid 中不是“开箱即用”的正方形开关，它只在宽度可算、高度未被锁死时才生效；写上却没效果，几乎全是布局干扰导致的静默失效。
为什么 aspect-ratio: 1 / 1 在 Grid 里常不生效
它本质是“宽高推导规则”，不是强制样式——浏览器只在子项的宽高完全由上下文决定时介入计算。一旦有以下任一情况，aspect-ratio 就直接退场：
-
grid-item上写了height、min-height、max-height（哪怕值是auto） - 父容器设了
grid-auto-rows: 200px或grid-template-rows: 100px 100px 100px -
align-items: stretch（Grid 默认值）把子项拉满行高，覆盖比例逻辑 - 子项用了
display: inline或display: table-cell（不支持aspect-ratio） - 把
aspect-ratio错误地写在 Grid 容器上（它只对单个 item 生效）
Grid 列定义怎么写才不和 aspect-ratio 冲突
列宽必须能提供可靠基准，否则 aspect-ratio 算不出高度。关键不是“几列”，而是“宽度是否可预测”：
- ✅ 推荐：
grid-template-columns: repeat(3, 33.3vh)—— 以视口单位锚定，脱离父高依赖 - ✅ 可响应：
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)))—— 列宽弹性，但需配合width: 100%和align-self: start - ❌ 避免：
grid-template-columns: 200px 200px 200px—— 固定像素列宽 +aspect-ratio能工作，但失去响应性 - ❌ 更糟：
grid-template-columns: repeat(3, 1fr)单独使用 —— 它只分配列宽，不约束行高，aspect-ratio缺少宽度来源时可能失效
每个 grid-item 必须加的最小配置
光写 aspect-ratio: 1 / 1 远不够。以下四条缺一不可，否则格子大概率塌陷或拉伸：
立即学习“前端免费学习笔记（深入）”；
- 显式声明
width: 100%（让 item 严格跟随所在列宽） - 加
align-self: start（释放align-items: stretch的拉伸控制权） - 彻底移除所有
height、min-height、max-height声明（包括height: auto） - 若内容含图片，必须套一层容器设
aspect-ratio，<img>自身加width: 100%; height: 100%; object-fit: cover;
旧浏览器降级必须结构分离，不能只靠 @supports
旧版 Safari（≤15.3）、微信 X5 内核会静默忽略 aspect-ratio，且 @supports (aspect-ratio: 1 / 1) 在它们身上返回 true，检测完全不可靠。
真正有效的降级方案是结构兜底：
- 外层容器设
position: relative; width: 100%; height: 0;和padding-bottom: 100%; - 内容层用
position: absolute; top: 0; left: 0; width: 100%; height: 100%; - CSS 顺序必须是：
aspect-ratio: 1 / 1在前，padding-bottom: 100%在后
最易被绕开的一点：即使网格形状完美，内容本身（如未约束的图片、换行失控的长文本）仍会撑破格子——aspect-ratio 管形状，不管内容铺法，这两件事得分开处理。
