Creé un botón de entrada que agregará más cuadrados a la cuadrícula, pero necesito que la cuadrícula tenga el mismo tamaño, independientemente de cuántos cuadrados le agregue, mientras que los cuadrados se vuelven más pequeños para tener en cuenta dentro de la cuadrícula.

 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!") } }