直接用 repeat(auto-fit, 1fr) 不能保证方块是正方形，因为 1fr 仅按比例分配列宽，不约束高宽比，容器高度由内容决定，导致宽高失衡；需对每个子元素设 aspect-ratio: 1/1 才能实现响应式正方形网格。
为什么直接用 repeat(auto-fit, 1fr) 不能保证方块是正方形
因为 1fr 只控制列宽（或行高）的**比例分配**，不约束内容区域的高宽比。Grid 容器默认按子元素自身尺寸或内容撑开高度，不会自动让 1fr 列对应等量的行高。结果就是：宽度随屏幕缩放，高度却卡在内容高度或最小值上，方块被拉扁或压扁。
用 aspect-ratio: 1 / 1 是最简方案，但要注意浏览器兼容性
现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）已原生支持 aspect-ratio，配合 1fr 可直接实现响应式正方形网格：
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))<br>;<br>gap: 1rem;<br><br>> div {<br> aspect-ratio: 1 / 1;<br> background: #eee;<br>}
- 必须对每个子元素（而非 Grid 容器）设置
aspect-ratio - 若需兼容旧版 Safari（aspect-ratio 会失效，需降级方案
- 注意：设了
aspect-ratio后，子元素内若写死height或使用flex布局可能覆盖该比例，优先级需留意
兼容旧版 Safari 的 fallback：用 padding-top 百分比技巧
利用「padding 百分比基于父容器宽度计算」这一特性，在子项中构造伪正方形容器：
> div {<br> position: relative;<br> width: 100%;<br> padding-top: 100%; /* 关键：高 = 宽 */<br>}<br><br>> div > * {<br> position: absolute;<br> top: 0;<br> left: 0;<br> width: 100%;<br> height: 100%;<br>}
- 这个技巧不依赖 Grid 行高，完全由子项自身控制比例
- 必须加
position: relative到子项，否则absolute子元素会脱离上下文 - 如果子项里需要文字居中，别用
line-height，改用display: flex; align-items: center; justify-content: center
别忽略 minmax() 里的最小值对响应断点的实际影响
repeat(auto-fit, minmax(200px, 1fr)) 中的 200px 不是“固定最小宽度”，而是 Grid 轨道能存在的**最小可分配宽度**。当容器总宽
- 例如：设
minmax(250px, 1fr)，容器宽 700px → 最多显示 2 列（2×250=500 ≤ 700；3×250=750 > 700） - 若希望至少保持 3 列，就得把最小值调低，比如
minmax(200px, 1fr)，此时 700px 容器可容纳 3 列（3×200=600 ≤ 700） - 实际项目中建议用
minmax(min(250px, 100%), 1fr)混合单位，避免小屏下单列过宽
真正难的是在保持比例的同时兼顾内容可读性——aspect-ratio 让方块“看起来是正方形”，但里面文字太小或图片被裁剪，用户照样觉得不响应。得把内容层级的缩放逻辑（比如 clamp() 控制字体）、图片的 object-fit 和 Grid 轨道规则一起调，才算闭环。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
