如何使网格单元格随网格尺寸变化自动填充全部空间？

要让单元格随网格尺寸变化自动填满容器，你需要调整容器布局并修改grid-square的样式，具体如下：

容器样式调整（必要前提） #

原有的flex布局无法简单实现动态均分网格，建议改用CSS Grid布局，同时通过CSS变量动态控制行列数：

#container {
  display: grid;
  background-color: rgba(49, 49, 49, 0.281);
  width: 50vw;
  height: 50vh;
  grid-template-columns: repeat(var(--grid-size), 1fr);
  grid-template-rows: repeat(var(--grid-size), 1fr);
}

grid-square类需要添加/修改的样式 #

去掉固定的width: 50%和aspect-ratio，改为让单元格完全填满网格分配的空间：

.grid-square {
  background-color: white;
  width: 100%;
  height: 100%;
}

配合JS动态设置网格尺寸 #

修改createDivs函数，添加CSS变量赋值并清空容器避免重复生成：

function createDivs(size) {
  container.innerHTML = '';
  container.style.setProperty('--grid-size', size);
  for (let i = 0; i < size * size; i++) {
    const newDiv = document.createElement("div");
    newDiv.classList.add("grid-square");
    newDiv.addEventListener("mouseover", changeColor);
    container.appendChild(newDiv);
  }
}

这样无论传入的size参数是多少，单元格都会自动均分容器的宽高，填满整个网格。

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