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

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

JavaScript
​x
 
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);
}

JavaScript
 
.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>

JavaScript
 
   <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>
​

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

Answer

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

JavaScript
 
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));
  
}

JavaScript
 
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);
}

JavaScript
 
.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>

JavaScript
 
<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>

Advertisement

Answer