Etch A Sketch游戏网格方块未完全填满容器空间问题求助

底部出现的条带是网格容器自身背景色露出，核心诱因有两个：

1. 全局通配符*给所有元素统一设置了深绿色背景，.container网格容器本身也带上了这个背景色，一旦网格单元格总尺寸无法完全覆盖容器内部，就会露出这个底色。
2. 网格单元格.squares设置了1px灰色边框，默认盒模型为content-box，边框宽度不纳入元素宽高计算，N行N列的网格总边框宽度会超出容器550px的固定宽高，浏览器自动压缩单元格内容区尺寸后，单元格总占比无法填满容器高度，就留出了底部空隙。

另外代码还存在一个隐藏逻辑问题：页面加载时先默认生成16*16网格，紧接着弹出尺寸输入框，用户提交新尺寸后会在原有格子基础上追加新单元格，导致网格总数翻倍，布局进一步错乱。

按以下步骤修改即可：

• 全局设置box-sizing: border-box盒模型，让边框、内边距都纳入元素宽高计算，不会额外撑出尺寸；把全局背景规则从通配符选择器移到body标签上，避免网格容器自带多余背景色。
• 删除.container样式里多余的justify-content: center属性，网格布局下该属性会让网格轨道整体居中排列，干扰轨道尺寸的自动计算。
• 在buildGrids函数开头增加清空父容器子元素的逻辑，每次生成新网格前先删掉旧单元格，避免重复追加元素。

CSS部分 #

:root {
  --grid-columns: 1;
  --grid-rows: 1;
}

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

body {
  background: rgb(50, 92, 83);
}

.top-info {
  display: flex;
  justify-content: center;
}

.btn {
  background: rgb(50, 110, 97);
  color: white;
  margin-top: 2em;
  font-size: 20px;
  border-radius: 20px;
  cursor: pointer;
}

.btn:hover {
  background: rgb(28, 71, 62);
}

.squares {
  background: rgb(255, 255, 255);
  border: 1px solid rgb(121, 121, 121);
}

.container-parent {
  display: flex;
  justify-content: center;
}

.container {
  display: grid;
  margin-top: 4em;
  width: 550px;
  height: 550px;
  border: 2px black solid;
  grid-template-rows: repeat(var(--grid-rows), 1fr);
  grid-template-columns: repeat(var(--grid-columns), 1fr);
}

JS部分 #

let container = document.querySelector(".container");

function buildGrids(x, y, parent) {
  // 生成新网格前清空原有内容
  parent.innerHTML = '';
  parent.style.setProperty("--grid-rows", x);
  parent.style.setProperty("--grid-columns", y);

  let gridStructure = new DocumentFragment();
  for (let i = 0; i < x * y; i++) {
    let newDiv = document.createElement("div");
    newDiv.className = "squares";
    gridStructure.appendChild(newDiv);
  }
  parent.appendChild(gridStructure);
}

const reset = document.querySelector(".btn");
reset.addEventListener("click", () => {
  window.location.reload();
});

function promptAnswer() {
  let input = prompt("enter the grid size you want between 6 to 64: ");
  if (input > 5 && input < 64) {
    buildGrids(input, input, container);
  } else {
    do {
      input = prompt("Please make sure your value is between 6 and 64!");
    } while (input < 5 || input > 64);
    buildGrids(input, input, container);
  }
}

container.addEventListener("mouseover", (cell) => {
  cell.target.style.background = "black";
});

// 移除首次加载默认生成16*16网格的逻辑，直接使用用户输入尺寸生成，避免重复渲染
promptAnswer();

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