如何让容器内的网格始终保持1:1的正方形尺寸？

嘿，作为刚接触HTML和JS的新手，碰到这种布局卡壳太正常了！我完全懂你想实现的效果——在400x400的容器里，不管用户要生成多少个网格，每个都得是规规矩矩的正方形对吧？我来帮你把问题捋顺～

先说说你当前代码的问题：你给.grid设了固定的width:20px，再加上aspect-ratio:1，这在数量少的时候没问题，但一旦用户输入的数量变多，固定宽度要么会让网格溢出容器，要么挤在一起后尺寸没法自适应，自然就保不住正方形的比例了。

给你一套调整后的方案，亲测有效：

第一步：调整容器的CSS，用Grid布局自动排列 #

容器要改成Grid布局，这样能根据网格数量自动分配每一项的空间，同时固定容器的400x400尺寸：

.container {
  width: 400px;
  height: 400px;
  display: grid;
  /* 核心：让列自动填充，每列宽度自适应分配 */
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  /* 让每行高度和列宽保持一致 */
  grid-auto-rows: 1fr;
  /* 如果不需要网格间的间隙可以设0，需要的话自己调整数值，比如2px */
  gap: 0;
}

第二步：优化网格项的CSS #

去掉固定宽度，靠Grid布局和aspect-ratio来强制正方形：

.grid {
  /* 强制高度等于宽度，1:1比例 */
  aspect-ratio: 1;
  /* 确保网格项占满整个单元格空间 */
  width: 100%;
  height: 100%;
  /* 可选：加个边框方便你看效果，不需要可以删掉 */
  border: 1px solid #eee;
}

为什么这样能行？ #

• 容器的Grid布局会根据网格数量自动计算每列的宽度，比如要放25个网格，就会分成5列，每列宽度是80px（400/5）；如果是10个，就会自动调整列数，每列宽度跟着变化。
• aspect-ratio:1会强制每个网格的高度等于它的宽度，不管宽度怎么变，都能死死守住正方形的比例。
• 如果你需要给网格加间隙，只要调整gap的值就行，Grid布局会自动把间隙算进去，重新分配每个网格的尺寸，依然保持正方形。

这样改完之后，不管用户输入多少个网格（只要不是多到单个网格尺寸小于1px这种极端情况），每个网格都会是完美的正方形，刚好填满400x400的容器～

备注：内容来源于stack exchange，提问作者lunarchild