使用FlexBox实现Etch A Sketch游戏的正方形网格盒子

别纠结flex了，直接用CSS Grid就能搞定自适应正方形网格，具体操作如下：

• 给网格容器设置display: grid，通过grid-template-columns: repeat(auto-fill, minmax(40px, 1fr))实现自动换行。这里的40px是单个格子的最小宽度，你可以根据需求调整，容器宽度变化时，Grid会自动增减列数，既保证格子不小于最小宽度，又能填满容器。
• 给每个网格项（正方形盒子）添加aspect-ratio: 1 / 1，强制宽高比为1:1，不管容器怎么缩放，格子始终保持正方形。
• 容器高度设为auto，让它由格子自动撑开，避免出现高度占满的长方形问题。

代码示例：

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 1px; /* 可选，设置格子间的间距 */
  width: 100%;
  height: auto;
}

.grid-item {
  aspect-ratio: 1 / 1;
  background-color: #f0f0f0;
}

如果需要根据用户输入的数量精准控制行列（比如输入64个就生成8×8网格），可以用JS计算行列数：
比如用户输入num个格子，列数取Math.ceil(Math.sqrt(num))，然后给容器设置grid-template-columns: repeat(${cols}, 1fr)，同时保留格子的aspect-ratio:1/1，这样刚好铺满容器，每个格子都是正方形。

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