The squares of my grid are overflowing from the container when number of squares in each row and column exceed '4' and above

Issue

Here's a link to 3 square grid 3 square grid
Here's a link to 4 square grid 4 square grid
Here's a link to 5 square grid 5 square grid

As you can see in the images the grid is overflowing the container after the number of squares exceed 4x4. Please help me solve this issue.

Here's the HTML, CSS and Java script of the Application.

function squares() {
  const square = document.querySelector('#grid');
  const n = prompt("Enter number of squares for the grid");
  console.log(n);
  const c = document.querySelector("#container");
  const x = 400 / n;
  c.style.width = (x * n) + 10 + "px";
  c.style.height = (x * n) + 10 + "px";
  square.style.width = x * n + "px";
  square.style.height = x * n + "px";
  for (let j = 0; j < n; j++) {
    const row = document.createElement("div");
    row.style.width = x * n + "px";
    row.style.height = x + "px";
    for (let i = 0; i < n; i++) {
      const sq = document.createElement('div');
      sq.style.border = "3px solid black";
      sq.style.backgroundColor = "blue";
      sq.style.width = x + "px";
      sq.style.height = x + "px";
      sq.classList.add('row');
      row.appendChild(sq);
    }
    row.classList.add('square');
    square.appendChild(row);
  }
}

#container {
  margin: auto;
  padding: 14px 14px 14px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 4px solid black;
  border-radius: 10px;
  background-color: white;
  display: flex;
}

#grid {
  flex: 1;
  display: flex;
}

<div id="container">
  <div id="grid"></div>
</div>
<div id="input_div">
  <button id="submit" onclick="squares()">Enter Number of Squares</button>
</div>

I think the problem lies in the java script code where there was a need of creating a div element called "row" to prevent all the squares from occupying a single row at the top. I created a variable called 'x' just to keep the size of each square in terms of the number of squares created. When i inspected this website in browser i found the problem lies in measurements of each square, since it was collectively overflowing irrespective of the size of the grid and container. Please tell if can be done in anyways and if 'x' needs to be created.

I know the code looks a bit complicated. A simpler and easy to understand version would be of great help if it can perform as intended.

Solution

Here's my implementation using CSS Grid.

const container = document.getElementById('container');
const input = document.querySelector('input');

/* Creates and inserts boxes into container
@param count - number of boxes to create
*/
function addBoxes(count) {
  let element;
  for (let i = 0; i < count; i++) {
    element = document.createElement('div');
    element.classList.add('box');
    container.appendChild(element);
  }
}

function clearGrid() {
  container.textContent = '';
}

function updateGrid(number) {
  clearGrid();
  addBoxes(number * number)

  container.style.gridTemplateRows = `repeat(${number}, 1fr)`;
  container.style.gridTemplateColumns = `repeat(${number}, 1fr)`;
}

input.addEventListener('input', () => {
  // Convert input value to a number, if becomes NaN if it contains a character that  is not an integer
  let number = +input.value;

  // Do nothing if the value is not a number
  if (!Number.isInteger(number)) {
    return;
  }

  // Negative numbers to positive
  number = Math.abs(number);

  // Max number to avoid freezing the browser and prevent overflow
  if (number > 20) {
    number = 20;
    input.value = number;
  }

  updateGrid(number);
})

#container {
  height: 410px;
  width: 410px;
  border: 3px solid black;
  padding: 3px;
  gap: 3px;
  display: grid;
}

.box {
  border: 3px solid black;
  background: blue;
}

<div id="container"></div>
<input type="number" max="50" placeholder="Enter a number">

Answered By - Dan