如何实现CSS Grid列宽与行高像素相等的响应式正方形网格？

需求说明 #

需要创建响应式CSS Grid布局，让每个网格轨道（单元格）的列宽与行高像素值完全相等（即单元格为正方形），列宽由设备宽度通过1fr自动分配，同时保持指定的网格区域布局。

现有问题 #

使用grid-auto-rows: auto、grid-auto-rows: 1fr或aspect-ratio无法满足需求，核心原因是未正确处理网格容器高度与列宽的联动关系，以及网格区域与网格项的对应匹配。

解决方案 #

完整代码实现 #

CSS 代码

#gridParent {
  margin: 5rem 14rem;
}

#grid {
  display: grid; /* 必须添加，启用网格布局 */
  --col-count: 4;
  --row-count: 6;
  --gap: 2rem;
  
  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(var(--col-count), 1fr);
  /* 计算行高：容器高度减去行间隙后均分至每行 */
  grid-auto-rows: calc( (100% - (var(--row-count) - 1) * var(--gap)) / var(--row-count) );
  gap: var(--gap);
  
  /* 计算容器高度：保证行高等于列宽 */
  height: calc( 
    ((100% - (var(--col-count) - 1)*var(--gap))/var(--col-count)) * var(--row-count) 
    + (var(--row-count)-1)*var(--gap) 
  );
}

/* 绑定网格项与对应区域 */
.gridItem:nth-child(1) { grid-area: a; }
.gridItem:nth-child(2) { grid-area: b; }
.gridItem:nth-child(3) { grid-area: c; }
.gridItem:nth-child(4) { grid-area: d; }
.gridItem:nth-child(5) { grid-area: e; }
.gridItem:nth-child(6) { grid-area: f; }
.gridItem:nth-child(7) { grid-area: g; }
.gridItem:nth-child(8) { grid-area: h; }
.gridItem:nth-child(9) { grid-area: i; }
.gridItem:nth-child(10) { grid-area: j; }
.gridItem:nth-child(11) { grid-area: k; }
.gridItem:nth-child(12) { grid-area: l; }

HTML 代码

<div id="gridParent">
    <div id="grid">
        <div class="gridItem"></div>
        <div class="gridItem"></div>
        <div class="gridItem"></div>
        <div class="gridItem"></div>
        <div class="gridItem"></div>
        <div class="gridItem"></div>
        <div class="gridItem"></div>
        <div class="gridItem"></div>
        <div class="gridItem"></div>
        <div class="gridItem"></div>
        <div class="gridItem"></div> <!-- 补充k区域对应的网格项 -->
        <div class="gridItem"></div> <!-- 补充l区域对应的网格项 -->
    </div>
</div>

核心原理 #

1. CSS 变量统一配置：用--col-count、--row-count、--gap统一管理列数、行数和间隙，便于后续调整维护。
2. 容器高度动态计算：通过calc计算网格容器高度，确保每行高度等于列宽：
   • 列宽 = (容器宽度 - 列间隙总和) / 列数
   • 容器高度 = 列宽 × 行数 + 行间隙总和
3. 行高精确分配：再次用calc将容器高度减去行间隙总和后，均分给每一行，保证每行高度一致且与列宽相等。
4. 网格区域绑定：通过:nth-child给每个网格项指定对应的grid-area，确保布局与预设的网格模板匹配。

可选调整 #

如果不需要k和l区域，可以修改grid-template-areas，例如将最后两行调整为：

grid-template-areas:
      "a a b b"
      "a a c d"
      "e e f f"
      "g g f f"
      "h h h h"
      "i i j j";

同时减少对应数量的网格项，保持区域与项的数量一致。

内容的提问来源于stack exchange，提问作者N_G