Etch a sketch square divs - grid question

Hi All,

I decided to make the etch a sketch grid by using CSS grid with grid-template-columns: repeat(16, 1fr) or (64, 1fr). After adding the prompt feature that asks the user for input regarding the size of the next box, the divs go from squares to rectangles because they are stuck on repeat 16 with the grid template.

Is there anyway to make this CSS grid method adjust according to user response so that there will be 25 repeating columns when 25 is entered in prompt? Thank you!

JS:

let num = 16;

for (let i = 0; i < num * num; i++) {
const container = document.querySelector(’#container’);

const content = document.createElement(‘div’);
content.classList.add(‘content’);

container.appendChild(content);
}

if (num == 64) {
container.classList.add(‘sixtyfour’);
}

function numberPrompt() {
num2 = prompt(‘How many boxes?’);
}

const colorChange = document.querySelectorAll(’.content’);

for (let i = 0; i<colorChange.length; i++) {
colorChange[i].addEventListener(‘mouseover’, () => {
colorChange[i].classList.add(‘black’);

 })

}

const btn = document.querySelector(‘button’);

for (let i = 0; i<colorChange.length; i++) {
btn.addEventListener(‘click’, () => {
colorChange[i].classList.remove(‘black’);
while(container.firstChild) {
container.firstChild.remove();
}

})
}

btn.addEventListener(‘click’, () => {
numberPrompt()
for (let j = 0; j < num2 * num2; j++) {
const container = document.querySelector(’#container’);

    const content = document.createElement('div');
    content.classList.add('contentx');
    
    content.addEventListener('mouseover', () => {
        content.classList.add('black');
    })
    
    container.appendChild(content);
    
    
    
    }

})

CSS:

#container {
display: grid;
grid-template-columns: repeat(16, 1fr);
width: 960px;
height: 960px;
border-style: solid;
border-color: gray;
border-width: 0.5px;
margin-left: auto;
margin-right: auto;
}

.content {
border-style: solid;
border-color: black;
height: auto;
width: auto;
border-width: 0.5px;
background-color: white;
}

.sixtyfour {
grid-template-columns: repeat(64, 1fr) !important;
}

.black {
background-color: black !important;
}

html {
background-color: aquamarine;
}

h1 {
display: flex;
justify-content: center;
align-items: center;
}

button {
height: 4em;
width: 7em;
background-color: pink;
margin-bottom: 1em;
}

button:hover {
transform: scale(1.2);
}

.contentx {
border-style: solid;
border-color: black;
height: auto;
width: auto;
border-width: 0.5px;
background-color: white;
}

I ended up looking at the DOMs from the solutions as this was my last step and used :root to make variables within the CSS file.

I was able to connect the variables to my grid-template-columns/rows and used setProperty in the .js file to tie it all together.