CSS Grid布局如何实现任意屏幕下网格方块始终为正方形

仅需修改#boardgrid的样式，完全保留原有高度、布局逻辑不变：

• 移除原有#boardgrid的width: 100%属性
• 新增aspect-ratio: 1 / 1属性，自动将容器宽高约束为1:1的正方形比例
• 可选添加margin: 0 auto，让宽度收缩后的容器在父级内居中

调整后的样式代码：

#boardgrid{
  height:100%;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}

原理 #

原有#boardgrid宽高均继承父级div2的100%尺寸，而div2受grid布局的宽高比影响本身尺寸不对等，导致内部彩色块的宽度（#boardgrid宽度的20%）和高度（#boardgrid高度的20%）无法相等。
将#boardgrid自身约束为1:1正方形后，内部的5行5列彩色格子会自动保持正方形形态，且完全沿用原有高度逻辑，不改动已经调试好的位置、高度效果。

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