网格单元格宽高无法小于32px？Etch-a-Sketch网格缩放异常求助

我正在制作一个带尺寸切换按钮的静态网格（支持16x16至64x64及中间任意尺寸），网格固定为40rem×40rem。目前遇到两个问题：

• 手动修改makeGrid()函数的单元格数量时，20以内的数值能让单元格正常缩放，但超过20后单元格尺寸不再变化，还会被网格截断
• 如果不给grid设置CSS的overflow属性，网格宽度会随单元格数量变化，但单元格本身无法缩小

另外，尺寸按钮暂未实现，目前只能手动修改makeGrid函数的参数来调整网格尺寸。

HTML #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Etch-a-Sketch</title>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>
  </head>
  <body>
    <div id="title">
      <h1>Etch-a-Sketch</h1>
    </div>
    <main id="container">
      <div id="menu">
        <button id="size"></button>
        <button id="color">Color</button>
        <button id="eraser">Eraser</button>
        <button id="clear">Clear</button>
        <button id="grid-borders">Grid Borders</button>
      </div>

      <div id="grid"></div>
    </main>
  </body>
</html>

CSS #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  background-color: aquamarine;
}

#grid {
  display: grid;
  justify-content: center;
  border: 1px solid #ccc;
  width: 40rem;
  height: 40rem;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.box {
  padding: 1em;
}

#title {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 180px;
}

#container {
  display: flex;
  height: 60%;
  width: 1259px;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 20px;
  padding-top: 20px;
}

#menu {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.border {
  outline: 1px solid black;
}

.no-border {
  outline: none;
}

.black-bg {
  background: black;
}

.white-bg {
  background: white;
}

JavaScript #

const grid = document.getElementById('grid');
const size = document.getElementById('size');
const eraser = document.getElementById('eraser');
const color = document.getElementById('color');
const gridBorder = document.getElementById('grid-borders');
const clear = document.getElementById('clear');

// grid
function makeGrid(number) {
  number = number || 16;
  let cellWidth = 40 / number + 'rem';
  let cellHeight = 40 / number + 'rem';
  grid.style.gridTemplateColumns = `repeat( ${number}, 1fr)`;
  grid.style.gridTemplateRows = `repeat(${number}, 1fr)`;
  for (let i = 0; i < number * number; i++) {
    let cell = document.createElement('div');
    grid.appendChild(cell).id = 'box';
    cell.classList.add('border');
    cell.classList.add('box');
    cell.style.backgroundColor = 'white';
    cell.style.width = cellWidth;
    cell.style.height = cellHeight;
  }
  size.textContent = `${number} x ${number}`;
}
makeGrid();

// drawing on hover
color.addEventListener('click', function () {
  grid.addEventListener('mouseover', function (e) {
    e.target !== grid ? (e.target.style.backgroundColor = 'black') : null;
  });
});

function changeColor(event) {
  event.target.style.backgroundColor = 'black';
}

// erase functionality
eraser.addEventListener('click', function () {
  grid.addEventListener('mouseover', function (e) {
    e.target !== grid ? (e.target.style.backgroundColor = 'white') : null;
  });
});

// grid borders
const allBoxes = document.querySelectorAll('.box');
gridBorder.addEventListener('click', function () {
  allBoxes.forEach((box) => {
    box.classList.toggle('no-border');
    box.classList.toggle('border');
  });
});

// clear button
clear.addEventListener('click', function () {
  allBoxes.forEach((box) => {
    box.style.backgroundColor = 'white';
  });
});

// size button
// size.addEventListener('click', function () {
//   let number = prompt(`Enter grid size less or equal to 100`);
//   if (number !== Number.isInteger()) {
//     return;
//   } else if (number > 100) {
//     number = prompt(`Enter grid size greater or equal to 100`);
//   }
// });

内容的提问来源于stack exchange，提问作者MasterBlaster