如何修复 css 中网格使用的像素总量？

Question

如果这是一个重复的问题，我很抱歉，我需要一些帮助，因为我是菜鸟。我创建了一个网格。但是每次我输入不同的数字时，它都会使用不同的像素总量。我希望包含网格的主体的高度和宽度保持完全相同的大小，无论网格的数量是多少。

https://moonsol124.github.io/ETCH-A-SKETCH-TOP-PROJECT-/

这是我做的。

java:

function createGrid(maxGrid = 16) {
    for (let i = 0; i < maxGrid; i++) {
        const divRow = document.createElement('div');
        divRow.classList.add('div-row');
        for (let j = 0; j < maxGrid; j++) {
            const div = document.createElement('div');
            div.classList.add('div-style');
            divRow.appendChild(div);
        }
        body.appendChild(divRow);
    }
addColorOnGrid();

}

css:

.div-row {
    display: flex;
    flex-direction: column;
}

.div-style {
    width: 25px;
    height: 25px;
    flex: 1 1 auto;
    background-color: RGB(0, 0, 0);
    border: solid 3px RGB(255, 255, 255);
}

html:

   <body>
        <div class="btn-group">
            <button class="btn" id="grid-button">Enter number of grid</button>
            <button class="btn" id="reset-button">Reset</button>
        </div>
        <div class="grid-body">

        </div>
    </body>

如果我的方法有误，请告诉我。感谢您的帮助。

Answer 1

我认为这会帮助您解决问题我只是添加了这些部分

divRow.appendChild(document.createElement("div"));
document.getElementById('ac').appendChild(divRow);

它访问父元素并在该元素中创建 div

你可以在这里传递任何数字来测试onLoad="createGrid(6)"

function createGrid(maxGrid) {

    for (let i = 0; i < maxGrid; i++) {
    
        const divRow = document.createElement("div");
        divRow.classList.add('div-row');
        
        for (let j = 0; j < maxGrid; j++) {
            const div = document.createElement('div');
            div.classList.add('div-style');
            divRow.appendChild(div);
        }
        
        divRow.appendChild(document.createElement("div"));
            document.getElementById('ac').appendChild(divRow);
    }

}

function popup() {

    let val = prompt("Please enter value here"); 
  
    const div = document.getElementsByClassName("div-style");
    
    for(i = 0; div.length > 0; i++){
        div[0].remove()
    }
  
   this.createGrid(parseInt(val));
  
}

.grid-body {
    display: flex;
    flex-direction: row;
}

.div-style {
    width: 25px;
    height: 25px;
    flex: 1 1 auto;
    background-color: RGB(0, 0, 0);
    border: solid 3px RGB(255, 255, 255);
}

<body onLoad="createGrid(6)">
        <div class="btn-group">
            <button class="btn" id="grid-button" onClick="popup()">Enter number of grid</button>
            <button class="btn" id="reset-button">Reset</button>
        </div>
        <div class="grid-body" id="ac">

        </div>
    </body>

如何修复 css 中网格使用的像素总量？

how do I fix the total amount of pixel used from a grid in css?

html

javascript

css