aspect-ratio: 1 / 1 在 grid 中不生效，是因为 align-items: stretch 默认拉伸 item 高度，覆盖比例控制；需设 align-self: start 并清除所有显式高度声明，配合 box-sizing: border-box 和 vh 锚定尺寸。
为什么 aspect-ratio: 1 / 1 在 Grid 里不生效
不是属性写错了，是它被默认行为静默覆盖了：grid 容器默认 align-items: stretch，会强制拉高每个 item 的高度，直接废掉 aspect-ratio 的比例控制权。另外，aspect-ratio 只对单个 grid item 生效，且要求它的宽度可计算、高度未被锁定（比如没写 height、min-height 或 max-height）。
常见错误现象：
- 写了
aspect-ratio: 1 / 1，但单元格还是被内容撑高或压扁 - 用
grid-template-columns: repeat(3, 1fr)+1fr行高，结果网格整体溢出容器 - 加了
padding或border后正方形变形，尤其在小屏上
必须做的两件事：
- 给每个 grid item 加
align-self: start（释放 stretch 控制） - 确保 item 上没设任何显式高度相关声明 —— 连
height: auto都要删掉
grid-template-columns 别用百分比或 1fr 直接均分
百分比高度（如 33%）在 Grid 中依赖父容器有明确高度，而 和 默认无 height，导致计算为 0；1fr 均分则无法约束最终尺寸，内容一多就撑破容器。
更可靠的做法是锚定视口或容器物理尺寸：
- 填满屏幕：用
grid-template-columns: repeat(3, 33.3vh)，再靠aspect-ratio锁定正方形 - 限制在固定宽高容器内：用 JS 测量首个 item 渲染后的
getBoundingClientRect().width，然后动态设grid-template-columns: repeat(3, ${px}px) - 响应式但不溢出：用
repeat(auto-fit, calc(var(--container-width) / 3))，配合 CSS 自定义属性注入容器宽度
注意：gap 必须从总宽中真实扣除，例如三列带 gap: 20px，列宽应为 calc((100% - 40px) / 3)，否则会换行或溢出。
边框、内边距和盒模型怎么不破坏正方形
aspect-ratio 计算的是 content box 的宽高比，但 padding 和 border 会额外增加元素总尺寸，导致视觉上不再是等宽等高，尤其当 box-sizing 是默认的 content-box 时。
解决方式很直接：
- 所有 grid item 必须设
box-sizing: border-box - 避免用
padding控制内部留白 —— 改用display: flex+justify-content/align-items居中文本或图标 - 如果必须用
padding，记得在aspect-ratio之外额外预留空间，比如把列宽从33.3vh改成calc(33.3vh - 2 * 1em)（前提是1em可预测）
别指望浏览器自动帮你扣减 —— aspect-ratio 不管 padding，它只管 content 区域。
旧浏览器 fallback 怎么写才不崩布局
aspect-ratio 在 Safari 15.4+、Chrome 88+、Firefox 89+ 才稳定支持。IE 和旧版 Safari 必须降级，但不能用 JS 检测后整套重写样式 —— 容易闪动或错位。
推荐渐进增强写法：
- 先写 padding-bottom 技巧作为基础（
padding-top: 100%+position: relative+ 绝对定位内容） - 再叠一层
aspect-ratio: 1 / 1，现代浏览器会覆盖前者的计算逻辑 - Grid 容器本身保持
display: grid，不要 fallback 到 float 或 inline-block —— 那会彻底打乱结构
关键点：padding-bottom 方案必须用 position: absolute 把内容拉回可视区，否则高度全是空白。而且这个方案只适用于单个正方形，3×3 网格得每个 item 单独处理，维护成本高 —— 所以除非明确要兼容 iOS 14 以下，否则不建议主用。
真正难的不是写出正方形，而是让九个正方形在各种内容长度、不同设备、不同缩放比例下，既不互相挤压，也不突破容器边界。最稳的路径是：用 vh 锚定初始尺寸 → aspect-ratio 锁定比例 → align-self: start 解除拉伸 → box-sizing: border-box 封死盒模型干扰。其他都是围绕这四点打补丁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
