Javascript 当每行和每列中的正方形数量超过或超过4；时，我的网格中的正方形就会从容器溢出

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