如何实现固定行列、填充高度且单元格保持1:1宽高比的CSS Grid布局

实现方案 #

问题核心原因 #

原有写法使用1fr声明网格列宽，会优先拉伸列宽占满容器宽度，单元格的aspect-ratio: 1会让高度同步被撑开，最终超过容器高度出现滚动条。

修正思路 #

直接基于容器高度计算每行高度，再将列宽设置为和行高相等的值，既保证所有单元格为正方形，也能让网格整体高度完全占满容器，多余宽度自动留在容器右侧。

完整代码（28x20 网格适用） #

/* 补全html高度声明，保证百分比高度生效 */
html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

.ctnr {
  display: grid;
  /* 28列，列宽=行高，计算逻辑和行高一致 */
  grid-template-columns: repeat(28, calc((100% - 19 * 1px) / 20));
  /* 20行，高度均分容器高度，减去19个1px的行间距 */
  grid-template-rows: repeat(20, calc((100% - 19 * 1px) / 20));
  gap: 1px;
  height: 100%;
  /* 可选，防止极端情况溢出 */
  overflow: hidden;
}

.cell {
  background: orange;
  /* 可选冗余保障，确保单元格始终为正方形 */
  aspect-ratio: 1;
}

<div class="ctnr">
  <!-- 生成28*20=560个.cell元素即可 -->
  <div class="cell"></div>
  <!-- 剩余.cell省略 -->
</div>

3x3 简化示例适配代码 #

如果要验证3x3效果，仅需修改网格行列的声明即可：

.ctnr {
  grid-template-columns: repeat(3, calc((100% - 2 * 1px) / 3));
  grid-template-rows: repeat(3, calc((100% - 2 * 1px) / 3));
}

适配说明 #

该方案完全兼容最新Chromium内核，calc计算无精度问题，符合Electron应用的开发需求，不会出现纵向滚动条，多余空间仅保留在网格右侧。

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