Etch-A-Sketch: Columns will resize, but rows won't. (CSS Grid)

I am creating an Etch-A-Sketch project as part of The Odin Project's foundations course. I have created a 16x16 grid, and the amount of cells in the grid will change depending on the user's input to a prompt.

My problem is that the amount of cells in the columns will change, but not the amount of cells in the rows. This results in the etch-a-sketch pad being made up of rectangles rather than evenly placed squares.

For example: If the user enters "32", there will be 32 cells in each column. But still only 16 columns. I need the grid to be 32x32 instead of 32x16.

const container = document.querySelector("#container");
const buttonSize = document.querySelector("#gridsize");
const buttonRainbow = document.querySelector("#gridsize");
let cell = document.querySelectorAll('.cell');
let cellAmount = 16;
window.onload = createGrid(cellAmount);
cell.onmouseover = mouseOver();

// creates a 16x16 grid
function createGrid(e){
    for (let i = 0; i < e*e; i++){
        const div = document.createElement("div");
        div.classList.add("cell");
        container.appendChild(div);
    }
}

// changes cell colors to black on mouseover
function mouseOver(){
    let cell = document.querySelectorAll('.cell');
    cell.forEach((cell) => {
        cell.addEventListener('mouseover', function(){
            cell.style.background = "black";
        })
    })
}

// resizes the grid and resets sketch
buttonSize.addEventListener('click', () => {
    for (i = 0; i < cell.length; i++){
        cell[i].style.removeProperty("black")
    } 
        let userAmount = prompt("Select your pixel size (Default: 16)");
        if (userAmount == ""){
            userAmount == 16;
        }
        while (parseInt(userAmount) < 4 || parseInt(userAmount) > 100){
            userAmount = prompt("Sorry, please enter a number between 4 and 100.");
        }
        cellAmount = parseInt(userAmount);
        while (container.hasChildNodes()){
            container.removeChild(container.firstChild);
        }
        createGrid(cellAmount);
        mouseOver();
});

#container {
    margin-top: 25px;
    display: inline-grid;
    grid-template-columns: repeat(16, 1fr);
    grid-template-rows: auto;
    border: 7.5px solid black;
    border-radius: 10px;
    height: 575px;
    width: 575px;
    box-sizing: border-box;
}

.cell {
   border: 1px solid black;
   box-sizing: border-box;
}

#title {
    display: flex;
    background-color: crimson;
    justify-content: center;
    width: 270px;
    height: 72px;
    margin-left: 815px;
    margin-top: 50px;
    border-style: solid aqua;
    border-radius: 35px;
    font-size: small;
}

#buttons {
    display: flex;
    justify-content: center;
    gap: 75px;
    margin-top: 40px;
}

#gridsize {
    background: black;
    color: white;
    border: none;
    width: 100px;
    height: 30px;
    font-size: large;
    border-radius: 20px;
    font-weight: bold;
}

#rainbow {
    background: black;
    color: white;
    border: none;
    width: 100px;
    font-size: large;
    font-weight: bold;
    border-radius: 20px;
}

#tipmessage {
    text-align: center;
    margin-top: 40px;
}

html {
    background-color: snow;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <title>Etch-A-Sketch.</title>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
     
        <div id="title">
            <h1>Etch-A-Sketch. &#128397</h1>
        </div>
        

        <div id="buttons">
            <button id="gridsize">Size</button>
            <button id="rainbow">Rainbow</button>
        </div>
        

        <div id="container"></div>

        <div id="tipmessage">
            <h3><em>'We don't make mistakes, just happy little accidents' - Bob Ross</em></h3>
        </div>

    </body>

    <script src="script.js" defer></script>

</html>

I have tried changing the CSS grid properties for #container however this has not solved the problem. I have inspected my JS but can't seem to figure out if the problem is coming from the JS, or the CSS.

For example, I tried changing my CSS Grid's columns and rows to "auto" but this completely ruined the grid.

Solution

The problem is coming from the CSS. This part:

#container{
    ...
    grid-template-columns: repeat(16, 1fr);
    ...
}

Because the grid-template-columns amount is hard-coded into the style-sheet it will not change with the new grid size received from the user. If the amount of columns is set to, say 33 and then you edit grid-template-columns via browser tools to match 33 then the divs created will appear as squares.

As it is written there must be 16 columns in the grid and no more or less.

So when you call the function that creates the grid you have to edit the grid-template-columns attribute of #container so that the grid-template-columns of the container is updated along with the amount of cells in the grid.

function createGrid(e){
    container.style.gridTemplateColumns = `repeat(${e},1fr)`  // This will make the divs square
    for (let i = 0; i < e*e; i++){
        const div = document.createElement("div");
        div.classList.add("cell");
        container.appendChild(div);
    }

}