如何用 CSS 实现网格中行列等宽高的正方形布局

通过 `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; as
pect-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;
}

⚠️ 注意事项：

• 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、响应式友好的解决方案。