javascript - jQuery - 网格返回不均匀的行和列

Question

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

JS fiddle : https://jsfiddle.net/4mph9ewk/

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

1. 在我的 js 文件中，我的 main() 函数中有一个嵌套的 for 循环，因此在此之前，我使用了一个 for 循环并只是将 boxSide 平方(boxSide 设置为等于一个由输入字段控制的参数)。

CSS

 .container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .title header h1 {
        margin: 1em 0em 1em 0;
    }

    .containerGrid {
        display: flex;
        flex-wrap: wrap;
        width: 300px;
        height: 300px;
        margin-bottom: 5em;

    }

    .cell {
        height: 15px;
        width: 15px;
        border-radius: 3px;
        border: 0.5px solid var(--black-color);
    }

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();

如果您在输入字段中输入 3，您会期望得到一个 3 x 3 的井，结果却是一个 3 x 2 的井，在底行最后一列有一个小方 block ，所以这是完全错误的。

Answer 1

好的，3 个变化:

1. 你正在运行从 1 到框大小的行循环，从 0 - boxsize 开始，否则你会少一行

2. 将单元格的公式从 % 更改为 px，并按框大小划分容器网格并移除 1 px 的边距

$(".cell").css("height", `${(300 / boxSide)-1}px`);
$(".cell").css("width", `${(300 / boxSide)-1}px`);

1. 最后，将您的单元格 CSS 移出循环并在 main() 函数中同时为所有单元格运行一次。

工作演示

JS FIDDLE