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

I'm sorry if this is a repeated question and I'd like some help cause I'm a noob. I created a grid. But every time I enter a different number, it uses a different total amount of pixel. I want the height and the width of the body that contains grid to stay exactly the same size no matter what the number of grid is.

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

here is what I made.

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 >
            <button  id="grid-button">Enter number of grid</button>
            <button  id="reset-button">Reset</button>
        </div>
        <div >

        </div>
    </body>

please tell me if my approach is wrong. thanks for your help.

CodePudding user response：

I think this will help to you solve your problem I just add these parts

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

it access the parent alement and create div inside that element

And you can pass any number here to test 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 onl oad="createGrid(6)">
        <div >
            <button  id="grid-button" onClick="popup()">Enter number of grid</button>
            <button  id="reset-button">Reset</button>
        </div>
        <div  id="ac">

        </div>
    </body>