通过 `aspect-ratio: 1` 配合显式 `grid-area` 分配，可强制 grid 中任意区域（包括跨多行/列的区域）按列宽动态生成等像素高度，实现完全响应式的正方形布局。
在 CSS Grid 中，让“行高 = 列宽（像素级相等）”是构建自适应正方形网格（如图标墙、卡片矩阵、棋盘式布局）的关键需求。但 grid-auto-rows: 1fr 或 auto 无法保证与 1fr 列宽数值一致——因为 fr 单位在行列间独立计算，且 gap、margin、容器尺寸变化都会打破像素对齐。
✅ 正确解法：利用 aspect-ratio: 1 + 显式 grid-area 定位
aspect-ratio 是现代 CSS（Chrome 88+/Firefox 89+/Safari 15.4+）中专为解决此类问题设计的属性。它使元素内容盒（content box）维持宽高比，而当元素被分配到固定宽度的 Grid 轨道中时，其高度会自动反向计算以满足比例——这正是我们所需的“列宽决定行高”的像素级联动。
以下是完整实现步骤：
定义网格结构与列宽
保持 grid-template-columns: repeat(4, 1fr)，确保四列均分可用宽度；使用 grid-auto-rows: 1fr 作为基础行高占位（虽不直接生效，但配合 aspect-ratio 可避免塌陷）。为每个 grid-area 单独设置 aspect-ratio: 1
关键点：aspect-ratio 作用于单个网格项（grid item），而非整个轨道。因此需为每个区域（如 .a, .b, .e 等）单独声明，并通过 grid-area 显式定位：
#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; /* 提供默认行高基准 */
gap: 2rem;
}
/* 每个区域独立设为正方形 */
.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;
}-
HTML 中按区域类名分配元素
确保每个的 X 与 CSS 中的 grid-area 名称一致，Grid 将自动将其渲染到对应区域，并因 aspect-ratio: 1 强制该元素宽高像素相等（宽度由所在列决定，高度自动匹配）：⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- aspect-ratio 仅作用于单个网格项，不改变轨道本身尺寸，因此即使 .a 占据 2×2 区域，其实际渲染尺寸仍由所在第一列宽度 × 1 决定（即一个正方形单元），而 Grid 自动将其拉伸填充整个 2×2 区域——若需保持视觉正方形，应确保所有跨区域项均使用相同 aspect-ratio，并接受其内容盒按比例缩放。
- 对于旧浏览器兼容性要求高的项目，可搭配 @supports (aspect-ratio: 1) 进行渐进增强，或使用 padding-top: 100% 技巧（需额外 wrapper 和绝对定位，复杂度显著上升）。
- gap 值不影响 aspect-ratio 计算，因其作用于轨道间隙而非内容盒，故无需额外补偿。
总结：aspect-ratio: 1 是目前最简洁、语义清晰且真正响应式的解决方案——它让 CSS 自动完成“列宽 → 行高”的像素映射，无需 JS 计算、无媒体查询嵌套，一行代码即可实现跨设备正方形网格。
