Javascript jQuery-具有不均匀行和列的网格返回

输入字段会减小/增大栅格大小，但栅格的行和列永远不会均匀

JS小提琴：

以下是我尝试过的： 1.我查看了我的CSS文件并查看了第31-44行。我使用flexbox制作网格，所以我认为“左浮动”会更有效

在我的js文件中，main（）函数中嵌套了for循环，因此在此之前，我使用了一个for循环，并对boxSide进行了平方处理（boxSide设置为一个由输入字段控制的参数）

CSS

JavaScript

            function reset(length) {
        boxSide = length;
        main();
        $(".cell").css({
                        "opacity": "0.1",
                        "border": "0.5px solid black",
                        "backgroundColor": "transparent"});
    }

    /*-- ------------------------- 
            Creates the Grid 
    ------------------------------*/
    function main() {
        $($containerGrid).empty();
        for (let row = 1; row < boxSide; row++) {
            for (let column = 0; column < boxSide; column++) {
                $(".cell").css("height", `${100 / boxSide}%`);
                $(".cell").css("width", `${100 / boxSide}%`);
                createCell()
            }
        }
    }

    function createCell() {
        const $cell = $('<div class="cell"></div>');
        $cell.css("opacity", "0.1");
        $containerGrid.append($cell);
    }

    main();

功能重置（长度）{
boxSide=长度；
main（）；
$（“.cell”）.css({
“不透明度”：“0.1”，
“边框”：“0.5px纯黑”，
“背景色”：“透明”}）；
}
/*-- ------------------------- 
创建网格
------------------------------*/
函数main（）{
$（$containerGrid）.empty（）；
for（设行=1；行

如果你在输入字段中输入3，你会认为是一个3 x 3的井，结果是一个3 x 2的井，底部一行，最后一列有一个小正方形，所以这是完全错误的。

好的，3个变化：

您正在运行从1到box大小的行循环，从0到boxsize执行该循环，否则您将少得到一行

将单元格的公式从%更改为px，将容器网格除以方框大小，并删除1 px作为边距

$（“.cell”）.css（“高度”，`${（300/boxSide）-1}px`）；
$（“.cell”）.css（“宽度”，`${（300/boxSide）-1}px`）这帮了大忙！谢谢你花时间帮助我。顺便问一下，这个问题好吗？有一次，我因为问了一些糟糕的问题而被鬼骂，只是想知道这个问题是否好。再次感谢你们！是的，这次很好，但很长；）如果有帮助，请投票并接受答案。你也可以在回答中看到工作中的小提琴，上面说我没有足够的声誉，但它被记录下来了，下次我问问题时，我会保持简短！我接受了你的回答，谢谢。
            function reset(length) {
        boxSide = length;
        main();
        $(".cell").css({
                        "opacity": "0.1",
                        "border": "0.5px solid black",
                        "backgroundColor": "transparent"});
    }

    /*-- ------------------------- 
            Creates the Grid 
    ------------------------------*/
    function main() {
        $($containerGrid).empty();
        for (let row = 1; row < boxSide; row++) {
            for (let column = 0; column < boxSide; column++) {
                $(".cell").css("height", `${100 / boxSide}%`);
                $(".cell").css("width", `${100 / boxSide}%`);
                createCell()
            }
        }
    }

    function createCell() {
        const $cell = $('<div class="cell"></div>');
        $cell.css("opacity", "0.1");
        $containerGrid.append($cell);
    }

    main();