动态创建响应式网格布局：从Flexbox到CSS Grid的优化实践

<div class="header">
  <h1>Etch A Sketch</h1>
  <div class="buttons">
    <button class="clear">Clear</button>
    <form id="inputForm">
      <input type="number" class="number" min=1 max=64 placeholder="Enter a # 1-64">
      <input type="submit" value="生成网格"> <!-- 添加提交按钮 -->
    </form>
  </div>
</div>
<div id="gridContainer">
  <!-- 网格方块将通过JavaScript动态生成 -->
</div>

body {
  background-color: #f0f0f0; /* 调整背景色 */
  min-height: 100vh;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  margin: 0;
}

h1 {
  margin: 0;
  color: #333;
}

#gridContainer {
  --num: 1; /* 定义一个CSS自定义属性，初始值为1 */
  width: 50vw; /* 使用视口宽度单位，更具响应性 */
  height: 50vw; /* 保持容器宽高一致，确保内部方块为正方形 */
  max-width: 800px; /* 设置最大宽度 */
  max-height: 800px; /* 设置最大高度 */
  background-color: white;
  display: grid;
  /* 关键：使用repeat()和var()动态设置列和行 */
  grid-template-columns: repeat(var(--num), 1fr);
  grid-template-rows: repeat(var(--num), 1fr);
  border: 1px solid #ccc; /* 添加边框 */
  box-shadow: 0 0 10px rgba(0,0,0,0.1); /* 添加阴影 */
}

.grid {
  /* 网格项的样式，无需设置宽度或高度，Grid会自动分配 */
  outline: 1px solid #eee; /* 用于测试和视觉分隔 */
  background-color: #f9f9f9; /* 默认背景色 */
  transition: background-color 0.1s ease; /* 添加过渡效果 */
}

/* 头部和按钮样式 */
.header {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px; /* 调整间距 */
  width: 80%; /* 调整宽度 */
  max-width: 800px;
  text-align: center;
  font-size: 24px; /* 调整字号 */
}

.buttons {
  display: flex;
  justify-content: space-around; /* 调整按钮间距 */
  margin-top: 15px;
}

.buttons button,
.buttons input[type="submit"] {
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  background-color: #007bff;
  color: white;
  transition: background-color 0.2s;
}

.buttons button:hover,
.buttons input[type="submit"]:hover {
  background-color: #0056b3;
}

.buttons input[type="number"] {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
  width: 150px;
  text-align: center;
}

var form = document.getElementById("inputForm");
var gridContainer = document.getElementById("gridContainer"); // 提前获取元素

form.addEventListener("submit", function(e) {
  e.preventDefault(); // 阻止表单默认提交行为

  var input = form.querySelector("input[type='number']");
  var num = input.valueAsNumber; // 获取数字类型的值

  // 验证输入
  if (isNaN(num) || num < 1 || num > 64) {
    alert("请输入一个1到64之间的数字！");
    return;
  }

  // 关键：通过JavaScript设置CSS自定义属性
  gridContainer.style.setProperty('--num', num);

  // 清空现有网格
  gridContainer.innerHTML = "";

  // 计算总方块数量
  var totalBoxes = num * num;

  // 动态创建并添加方块
  for (var i = 0; i < totalBoxes; i++) {
    var div = document.createElement("div");
    div.className = "grid"; // 应用网格项样式
    gridContainer.appendChild(div);
  }
});

// 可选：添加清除按钮的逻辑
var clearButton = document.querySelector(".clear");
clearButton.addEventListener("click", function() {
  // 遍历所有网格项，重置其背景色（假设Etch A Sketch功能是改变背景色）
  var gridItems = gridContainer.querySelectorAll(".grid");
  gridItems.forEach(item => {
    item.style.backgroundColor = '#f9f9f9'; // 恢复默认背景色
  });
});

// 示例：为网格项添加交互（如鼠标悬停变色）
gridContainer.addEventListener("mouseover", function(e) {
  if (e.target.classList.contains("grid")) {
    // 随机生成颜色，或者固定为某种颜色
    e.target.style.backgroundColor = getRandomColor(); 
  }
});

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}