aspect-ratio: 1 / 1 实现正方形需满足宽度可计算、高度未被显式锁定；Grid 中须写在 item 上并加 align-self: start，Flex 中需 align-items: flex-start 和 min-width: 0；旧浏览器需 padding-bottom 降级。
直接用 aspect-ratio: 1 / 1 就能实现，但多数人写完没效果——不是属性错了，而是它被 height、min-height 或父容器的 align-items: stretch 静默覆盖了。
为什么 aspect-ratio: 1 / 1 在 Grid 里不生效
它只作用于单个 grid item，不是容器；且前提是该 item 的宽度可计算、高度未被显式锁定。
-
grid-template-columns: repeat(3, 1fr)提供了宽度基准，但若你在 item 上写了height: 100%或min-height: 200px，aspect-ratio立即失效 - Grid 容器默认
align-items: stretch，会强制拉高 item —— 加align-self: start才能释放比例控制权 - 别把
aspect-ratio写在容器上，它对轨道尺寸无影响；必须写在每个.grid-item上 - 如果列宽由
minmax(200px, 1fr)动态决定，aspect-ratio仍能工作，但需确保 item 没设flex相关属性干扰布局流
Flex 布局中正方形项总被拉伸或塌缩
Flex 默认垂直拉伸子项，而 aspect-ratio 只在“高度由内容或可用空间决定”时起作用。
- 必须加
align-items: flex-start到容器，或为每个 item 单独加align-self: start - item 上要写
min-width: 0，否则嵌套 Flex 时flex-shrink可能把宽度压到 0，导致比例失去宽度基准 - 宽度不能靠
flex-basis模糊推导，推荐显式写width: calc((100% - 2vmin) / 3)（3 列、gap: 1vmin），gap 必须从总宽中真实扣除 - 避免在 item 上设
height或max-height，哪怕值是auto也不行 —— 要彻底留空
旧版 Safari（≤ 15.3）和微信 X5 内核下高度坍缩为 0
这些环境会静默忽略 aspect-ratio，不报错也不渲染，结果就是元素高度为 0。
- 降级方案必须结构分离：外层容器用
position: relative+padding-bottom: 100%，内容用position: absolute; top: 0; left: 0; width: 100%; height: 100% - CSS 顺序必须是：
aspect-ratio: 1 / 1在前，padding-bottom: 100%在后；反序会导致现代浏览器也出问题 - 不要给同一选择器同时写
height: 0和padding-bottom——height: 0会禁用aspect-ratio，而旧浏览器又依赖padding撑高 - 若用 SSR 或静态生成，
aspect-ratio不触发 FOUC，但padding方案在 JS 注入前可能闪动，这点常被忽略
真正容易被绕开的一点：即使容器是完美正方形，里面图片若没配 object-fit: cover 或 contain，依然会留白或拉伸——aspect-ratio 管形状，不管内容怎么铺，这两件事得分开处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
