如何让我的网格始终保持与 1:1 相同的正方形尺寸？

Question

我只是 HTML 和 javascript 的初学者，所以我还没有完全掌握这门语言。我遇到了困难，正在寻求帮助。

点击查看情况

问题是我正在尝试创建尺寸始终为正方形的网格，无论用户要求将多少个网格放入容器中。

容器为 400 x 400 像素。最多可以创建 < 100 depending on user input with the grids filling up the row columns.

行

我在 CSS 代码中添加了宽高比，

.container {
max-width: 400px;
max-height: 400px;
}

.grid {
width: 20px; 
aspect-ratio: 1;
min-height: 0; /* For grid not to grow beyond preferred height set by aspect ratio… */
overflow: auto;
}

但看来这并没有解决问题。

如果有人能帮助我，我将不胜感激，谢谢。

Answer 1

我找到了问题的解决方案。一篇关于最小和最大尺寸的文章帮助我发现了需要解决的根本问题。1

必须删除指定的宽度：20px，因为它导致内容溢出，因为尺寸设置为相同。因此，将其更改为“auto”可以让宽度根据容器的大小进行调整。

 .container {
min-width: 400px;
min-height: 400px;
max-width: 400px;
max-height: 400px;
}

.grid {
width: auto;
aspect-ratio: 1;
}