通过 `aspect-ratio: 1` 配合 `grid-area` 显式定位，可强制指定区域内的网格项呈正方形；结合 `grid-auto-rows: 1fr` 与 `grid-template-columns: repeat(4, 1fr)`，使所有行高自动匹配列宽（像素级一致），实现完全响应式的正方形网格布局。
在 CSS Grid 布局中，让“列宽 = 行高”并确保每个网格区域（尤其是跨多格的区域如 a 占 2×2）呈现为严格正方形，传统方法（如 grid-auto-rows: 1fr 单独使用）往往失效——因为 1fr 在行方向上默认不感知列宽，且 auto 或 min-content 无法触发等比约束。
✅ 正确解法是：利用 aspect-ratio: 1 控制单个网格项的宽高比，并配合 grid-area 精确分配，再由 grid-auto-rows: 1fr 统一拉齐行高。关键在于——只要任一占据单个逻辑“单元格”的元素（如 .a 对应的 2×2 区域中某个代表项）设定了 aspect-ratio: 1，且其所在轨道被设为 1fr，CSS 就会以该元素的宽度（即 1fr 列宽）为基准，反向推导出行高，从而实现像素级一致。
以下是完整、可运行的实现方案：
#gridParent {
margin: 5rem 14rem;
}
#grid {
display: grid;
grid-template-areas:
"a a b b"
"a a c d"
"e e f f"
"g g f f"
"k l h h"
"i i j j";
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 1fr; /* ✅ 关键：使每行高度 = 1fr（与列宽同单位） */
gap: 2rem;
}
/* 为每个命名区域定义一个带 aspect-ratio 的占位项 */
.a { grid-area: a; aspect-ratio: 1; }
.b { grid-area: b; aspect-ratio: 1; }
.c { grid-area: c; aspect-ratio: 1; }
.d { grid-area: d; aspect-ratio: 1; }
.e { grid-area: e; aspect-ratio: 1; }
.f { grid-area: f; aspect-ratio: 1; }
.g { grid-area: g; aspect-ratio: 1; }
.h { grid-area: h; aspect-ratio: 1; }
.i { grid-area: i; aspect-ratio: 1; }
.j { grid-area: j; aspect-ratio: 1; }
.k { grid-area: k; aspect-ratio: 1; }
.l { grid-area: l; aspect-ratio: 1; }
.gridItem {
background: #ff6b6b;
border-radius: 4px;
}<div id="gridParent">
<div id="grid">
<!-- 每个区域至少有一个带 class 的项，确保其渲染并触发 aspect-ratio 计算 -->
<div class="gridItem a"></div>
<div class="gridItem b"></div>
<div class="gridItem c"></div>
<div class="gridItem d"></div>
<div class="gridItem e"></div>
<div class="gridItem f"></div>
<div class="gridItem g"></div>
<div class="gridItem h"></div>
<div class="gridItem i"></div>
<div class="gridItem j"></div>
<div class="gridItem k"></div>
<div class="gridItem l"></div>
</div>
</div>⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- aspect-ratio 是现代 CSS 核心特性（Chrome 88+、Firefox 89+、Safari 15.4+），旧版浏览器需降级方案（如 JS 监听 resize + 动态设置 height = width）；
- 所有 .gridItem 必须显式分配 grid-area 类（如 .a, .b），否则 aspect-ratio 不生效于未定位项；
- 不要给 .gridItem 设置固定 width/height，否则会覆盖 aspect-ratio 的自动计算；
- 若某区域（如 a）需视觉上填充 2×2 空间，无需额外嵌套或合并单元格——grid-area: a 已天然覆盖对应区域，aspect-ratio 作用于该区域首个渲染项即可驱动整行/列对齐。
总结：这不是“让行高等于列宽”的数学计算，而是利用 CSS Grid 的轨道分配机制与 aspect-ratio 的内在约束协同工作——当 1fr 列宽确定后，aspect-ratio: 1 的项会迫使所在行轨道按相同数值撑开，最终达成像素级正方形一致性。这是目前最简洁、纯 CSS、响应式友好的解决方案。
