用aspect-ratio: 1 / 1是最干净的现代解法，因它是css原生宽高比控制，作用于内容盒本身，只需设width或height之一即可自动推导另一尺寸，无需padding hack、绝对定位或额外wrapper，且兼容chrome 88+、firefox 89+、safari 15.4+。
直接用 aspect-ratio: 1 / 1 就能做响应式正方形网格，但前提是容器内容不撑开高度、父级不设死高、且浏览器支持该属性（Chrome 88+、Firefox 89+、Safari 15.4+）。
为什么不用 padding-top 百分比“黑魔法”了？
老方案靠 padding-top: 100% + position: absolute 嵌套子元素，写法绕、可维护性差、无法响应文字流变化。而 aspect-ratio 是原生布局控制，作用于盒模型本身，不影响文档流，也无需额外 wrapper。
- 它让元素的宽高比独立于内容和父容器尺寸，只要宽度变化，高度自动按比例缩放
- 不依赖伪元素或绝对定位，
grid或flex子项直接设aspect-ratio: 1 / 1即可 - 注意：若子元素含大图或长文本，仍需配合
overflow: hidden或max-height: 100%防溢出
Grid 布局中每个格子设 aspect-ratio 的实操要点
在 display: grid 容器里，给每个 grid-item 设置 aspect-ratio 最直接，但要注意 Grid 轨道行为不会因此被覆盖——比如你设了 grid-template-columns: repeat(3, 1fr)，每个格子宽度由列轨道决定，aspect-ratio 只负责算出对应高度。
- 必须移除所有显式设置的
height或min-height，否则会覆盖aspect-ratio - 若格子内有图片，建议用
img { width: 100%; height: 100%; object-fit: cover; }保证填充 - 在 Safari 15.4 之前版本不支持，可用
@supports not (aspect-ratio: 1 / 1)回退到 padding 方案
遇到“正方形变扁了”或“高度没生效”的常见原因
不是属性写错了，而是它被其他样式压制了。最常踩的坑是：父容器设置了 align-items: stretch（Grid/Flex 默认值），但子项又设了 min-height 或内容自身有最小高度。
- 检查是否误加了
height: auto !important或min-height: 200px—— 这些会直接禁用aspect-ratio - Flex 容器中，若子项是
align-self: stretch，而父项有固定height，则aspect-ratio失效（它只在“尺寸由内容或可用空间决定”时起作用） - 使用
aspect-ratio的元素不能是替换元素（如<img>自身）的直接父级且同时设了height，否则浏览器可能忽略比例计算
真正要小心的是那些“看起来没动过但实际干扰了盒模型计算”的隐性约束，比如某层祖先用了 contain: layout，或某个 CSS-in-JS 库注入了不可见的 min-height 行内样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
