i have created an input button which will add more squares to the grid but i need the grid to be of the same size regardless of how many squares i add to it while the squares become smaller to account for themselves inside the grid

const grid = 
document.querySelector('.grid');
const blackButton = 
document.querySelector('.blackbutton');
blackButton.addEventListener('click', 
blkButton);
const clear = 
document.querySelector('.clearbutton')
clear.addEventListener('click', 
clearGrid);
const eraserButton = 
document.querySelector('.eraserbutton')
eraserButton.addEventListener('click', 
ersButton)
const rainbowButton =document.querySelector('.rainbowbutton')
rainbowButton.addEventListener('click', 
rbwButton)
 //DOM handling



function getGrid(size) {
const grid = 
document.querySelector('.grid');
 const boxs = 
grid.querySelectorAll(".box");
boxs.forEach((div) => div.remove());
grid.style.gridTemplateColumns = 
`repeat( ${size} , 1fr)`;
grid.style.gridTemplateRows = `repeat( 
${size} , 1fr)`;

   let amount = size * size
    for (let i = 0; i < amount; i++) {
  const box = 
  document.createElement('div');
  box.classList.add('box');
  grid.appendChild(box);
} 
}

getGrid(16)

 function changeSize(input){
if (input >= 2 && input <= 100) {
  getGrid(input);
 }
 else {
  console.log("Only between 2 to 100 Fam!")
}

}