Css 基于flexbox的动态网格布局

我计划根据用户输入进行网格布局。例如，如果用户输入值'3'，3 x 3的方块会像Tic Tac Toc游戏布局一样动态地放在页面上。我认为flexbox是一个很好的方法。但是，根据输入值，每个单元格的宽度和高度将不同。我听说通过设置.px进行尺寸控制不是理想的方法。我已经研究了很多例子，但是我还没有找到一个动态布局的例子。你对这个问题有什么建议吗

我试过的方法如下。在这里，我使用了引导，但我意识到我不需要使用它，因为gridcss或flexbox已经提供了该功能。无论如何，在生成html字符串之后，我将它们放在容器中，但正如您所期望的，高度远小于宽度。我想做的是自己调整宽度和高度，有什么好办法？我不想直接设置px值

for (var i = 0; i < num; i++) {
        html += '<div class="row">';
        for (var j = 0; j < num; j++) {
          html += `
            <div class="col-md-1">0</div>`;
        }
        html += "</div>";
}

for（变量i=0；i

假设问题的一部分是在播放板中创建纵横比为1:1的单元格

为此，您可以使用漂亮的CSS技巧，将单元格嵌入另一个div中，该div具有

padding top:100%

填充顶部
与父元素的
宽度
相关，因此当值为
100%
时，纵横比将始终为1:1

希望您至少尝试自己编写代码。我建议你做一些，或者通过谷歌，或者通过搜索，尝试一下。如果您仍然有问题，请返回您的代码并解释您尝试了什么。哇，这可能是一个很好的解决方案，非常感谢！！昨晚我努力想弄清楚。我为容器放置相同的宽度和高度（显示：网格），然后网格模板列：repeat（3，1fr）；网格模板行：重复（3，1fr）。它给出了宽度和高度相同的正方形。再次感谢您的解决方案，非常欢迎。如果您对建议满意，请将我的答案标记为线程解决方案。