如何创建支持自定义行列数的动态正方形CSS Grid网格

你的核心需求是让用户输入数值后生成对应大小的正方形网格，目前的问题在于CSS Grid的行列数是固定写死的，而且每次点击按钮会叠加旧的单元格。我来帮你调整代码，实现动态适配：

关键修改点： #

• 动态设置Grid行列：通过JavaScript修改容器的grid-template-columns和grid-template-rows属性，用repeat()函数生成对应数量的等宽等高单元格。
• 清空旧网格：每次创建新网格前，先清空容器内的旧元素，避免叠加。
• 输入验证：添加简单的输入校验，确保用户输入有效的正整数。
• 移除冗余样式：删除div的float: left，因为CSS Grid已经负责布局，float会干扰网格排列。

完整修改后的代码： #

CSS（style.css）

#container {
  display: grid;
  width: 500px;
  height: 500px;
}

div {
  width: 100%;
  height: 100%;
  outline: 1px solid;
}

HTML & JavaScript

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>Etch-a-sketch</title>
</head>
<body>
  <h1>Etch-a-sketch</h1>
  <button id="start">Start</button>
  <div id="container"></div>

  <script>
    const btn = document.getElementById("start");
    btn.addEventListener("click", createGrid);

    function createGrid() {
      let numberOfRows = prompt("How many rows do you want?");
      // 转换为整数并验证输入有效性
      numberOfRows = parseInt(numberOfRows);
      if (isNaN(numberOfRows) || numberOfRows <= 0) {
        alert("Please enter a positive whole number!");
        return;
      }

      const container = document.getElementById("container");
      // 清空容器内的旧单元格
      container.innerHTML = '';
      // 动态设置网格的行列数
      container.style.gridTemplateColumns = `repeat(${numberOfRows}, 1fr)`;
      container.style.gridTemplateRows = `repeat(${numberOfRows}, 1fr)`;

      const totalCells = numberOfRows ** 2;
      for (let i = 0; i < totalCells; i++) {
        const div = document.createElement("div");
        div.addEventListener("mouseenter", function() {
          this.style.backgroundColor = "red";
        });
        container.appendChild(div);
      }
    }
  </script>
</body>
</html>

工作原理： #

1. 当用户点击"Start"按钮，弹出输入框获取行列数，先验证输入是否为正整数。
2. 清空容器内之前的所有单元格，避免新旧网格叠加。
3. 用repeat(${numberOfRows}, 1fr)设置网格的行列：1fr表示每个单元格均分容器的可用空间，这样不管输入多少，都会生成完美的正方形网格。
4. 循环创建对应数量的单元格，并为每个单元格添加鼠标悬停变色的事件监听。

这样修改后，你就能实现用户输入任意正整数，生成对应大小的正方形网格啦！

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