使用 flexbox 的动态网格布局答案

【问题标题】：dynamic grid layout using flexbox使用 flexbox 的动态网格布局
【发布时间】：2018-10-22 21:52:08
【问题描述】：

我计划根据用户输入进行网格布局。例如，如果用户输入值“3”，则 3 x 3 的正方形会像井字棋游戏布局一样动态放置在页面上。我认为 flexbox 是一个很好的方法。但是，根据输入值，每个单元格的宽度和高度会有所不同。我听说通过设置 .px 来控制尺寸不是可取的方式。我研究了很多示例，但我还找不到动态布局示例。您对这个问题有什么建议吗？

我尝试过的方式如下。在这里，我使用了 bootstrap，但我意识到我不需要使用它，因为 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>";
}

【问题讨论】：

希望您至少尝试自己编写代码。我建议你做一些additional research，通过谷歌或搜索SO，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。

标签： css flexbox

【解决方案1】：

假设这里的部分问题是在棋盘内创建具有 1:1 纵横比的单元格。

为此，您可以使用漂亮的 CSS 技巧，将单元格嵌入到另一个具有 padding-top: 100%; 的 div 中。

padding-top 是相对于父元素的width，所以100% 的纵横比总是1:1

Working jsFiddle example

【讨论】：

哇，这可能是一个很好的解决方案，非常感谢！我昨晚非常努力地想弄清楚。我为容器（显示：网格）设置了相同的宽度和高度，然后是 grid-template-columns: repeat(3, 1fr);网格模板行：重复（3、1fr）。它给出了具有相同宽度和高度的正方形。再次感谢您的解决方案。
不客气。如果您对建议感到满意，请将我的回答标记为主题解决方案。