动态调整CSS Grid尺寸时避免布局问题的教程

const container = document.querySelector(".container");
const eraser = document.getElementById("eraser");
const setSizeBtn = document.getElementById("setSize"); // 更改变量名以避免与尺寸值混淆
const pink = document.getElementById("pink");
const reset = document.getElementById("reset");

// 存储当前绘制颜色，默认为粉色
let currentColor = "pink";

function createGrid(size) {
  // 1. 清空容器内所有现有子元素
  container.innerHTML = ''; 

  // 根据新的尺寸设置网格行和列
  container.style.gridTemplateRows = `repeat(${size}, 1fr)`;
  container.style.gridTemplateColumns = `repeat(${size}, 1fr)`;

  for (let i = 0; i < (size * size); i++) {
    let cell = document.createElement("div");
    cell.style.backgroundColor = "white";
    cell.style.border = "white solid 0.1px";
    cell.style.boxSizing = "border-box"; // 推荐：确保边框不影响元素总尺寸
    container.appendChild(cell);

    // 为每个单元格添加鼠标悬停事件监听器
    // 注意：事件监听器应在单元格创建时添加，并根据当前颜色状态进行更新
    cell.addEventListener('mouseover', () => {
      cell.style.backgroundColor = currentColor;
    });

    // 为每个单元格添加重置事件监听器
    // 注意：这里的resetGrid函数只在循环内定义，每次创建单元格都会重新定义一次
    // 更好的做法是将事件监听器添加到reset按钮本身，然后遍历所有单元格进行重置
    reset.addEventListener('click', () => {
      cell.style.backgroundColor = "white";
    }, { once: true }); // 使用 { once: true } 避免重复添加监听器，或在createGrid外部处理
  }
}

// 初始创建16x16网格
createGrid(16);

// 动态设置网格尺寸的函数
function setGridSize() {
  let x = prompt("What size grid? (Up to 100)");
  x = parseInt(x); // 确保x是数字

  if (isNaN(x) || x <= 0 || x > 100) {
    alert("Must be a number between 1 and 100.");
  } else {
    createGrid(x);
  }
}

// 按钮事件监听器
setSizeBtn.addEventListener('click', setGridSize);

eraser.addEventListener('click', () => {
  currentColor = "white"; // 设置为橡皮擦模式
});

pink.addEventListener('click', () => {
  currentColor = "pink"; // 设置为粉色绘制模式
});

// 优化：重置按钮的事件监听器应该在外部定义一次，并作用于所有单元格
reset.addEventListener('click', () => {
  const cells = container.querySelectorAll('div');
  cells.forEach(cell => {
    cell.style.backgroundColor = "white";
  });
  currentColor = "pink"; // 重置后默认切换回粉色绘制
});

html {
  background-color: rgb(248, 222, 226);
}
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: CerebriSans-Regular,-apple-system,system-ui,Roboto,sans-serif;
}
.content {
  display: flex;
  align-items: center;
  justify-content: center;
}
.container {
  width: 700px;
  height: 700px;
  display: grid;
  margin: 10px;
  border: 4px solid rgb(244, 215, 215);
  border-radius: 5px;
}
h1 {
  text-align: center;
  font-weight: 900;
  color: white;
  font-size: 55px;
  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}
.buttonCon {
  width: 200px;
  height: 90px;
  padding: 10px;
  margin: 5px;
  background-color: white;
  border:4px rgb(244, 215, 215) solid;
}
.footer {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
/* CSS for button design from cssscan, edited to suit color-scheme*/
button {
  background-color: pink;
  border-radius: 100px;
  box-shadow: rgba(252, 196, 246, 0.657) 0 -25px 18px -14px inset,rgba(245, 202, 237, 0.948) 0 1px 2px,rgb(238, 185, 234) 0 2px 4px,rgb(255, 185, 235) 0 4px 8px,rgba(241, 192, 230, 0.484) 0 8px 16px,rgb(255, 220, 254) 0 16px 32px;
  color: white;
  cursor: pointer;
  display: inline-block;
  font-family: CerebriSans-Regular,-apple-system,system-ui,Roboto,sans-serif;
  padding: 3px 20px;
  text-align: center;
  text-decoration: none;
  transition: all 250ms;
  border: 0;
  font-size: 16px;
  margin: 6px;
}
button:hover {
  box-shadow: rgb(238, 173, 230) 0 -25px 18px -14px inset,rgba(248, 186, 237, 0.948) 0 1px 2px,rgb(255, 177, 250) 0 2px 4px,rgb(244, 171, 223) 0 4px 8px,rgb(203, 163, 194) 0 8px 16px,rgb(242, 202, 241) 0 16px 32px;
  transform: scale(1.05) rotate(-1deg);
}