本文详细介绍了如何使用CSS Grid技术，结合JavaScript动态创建并管理一个可变尺寸的方格网格，以适应用户输入。通过利用CSS自定义属性和Grid布局的`repeat()`函数，我们能够轻松实现一个响应式的`N x N`正方形网格，避免了Flexbox在处理二维布局时可能遇到的复杂性，特别适用于“Etch A Sketch”类应用。

在Web开发中，创建动态且响应式的网格布局是一个常见需求，尤其是在构建交互式应用如“Etch A Sketch”时。当需要根据用户输入生成一个N x N的方格网格，并且每个方格都能自动调整大小以填充容器时，CSS Grid提供了一种强大而简洁的解决方案。

1. 理解问题：Flexbox在二维网格中的局限性

最初尝试使用Flexbox来创建N x N的方格网格时，开发者可能会遇到一些挑战。例如，如果将容器设置为display: flex并给子元素设置flex-basis: 100%，即使开启flex-wrap: wrap，每个子元素也会占据容器的全部宽度，导致生成的是一列列的矩形，而非期望中的正方形网格。这是因为Flexbox主要设计用于一维布局（行或列），虽然可以通过一些技巧模拟二维布局，但对于严格的N x N方格布局，CSS Grid无疑是更直接和高效的选择。

2. 解决方案：拥抱CSS Grid布局

CSS Grid专为二维布局而生，能够同时控制行和列。结合CSS自定义属性（CSS Custom Properties）和JavaScript，我们可以轻松实现动态的方格网格。

2.1 HTML 结构

首先，我们需要一个容器来承载我们的网格，以及一个用户输入表单来获取网格尺寸。

  
Etch A Sketch
  
    清除
    

      
      
    
  


  

这里，#gridContainer将作为我们的CSS Grid容器，其内部的网格单元（div）将由JavaScript根据用户输入动态创建。

2.2 CSS 样式

核心的CSS样式在于#gridContainer。我们将利用CSS自定义属性--num来存储网格的边长，并通过JavaScript动态更新它。

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 {
  /* 定义一个CSS自定义属性，默认值为1，用于控制网格的行列数 */
  --num: 1; 
  width: 50vw; /* 网格容器宽度 */
  height: 50vw; /* 网格容器高度，保持与宽度一致以确保方格 */
  background-color: white;
  border: 1px solid #ccc;
  display: grid; /* 启用CSS Grid布局 */
  /* 动态创建网格列：repeat(var(--num), 1fr) 表示创建var(--num)列，每列等宽 */
  grid-template-columns: repeat(var(--num), 1fr);
  /* 动态创建网格行：repeat(var(--num), 1fr) 表示创建var(--num)行，每行等高 */
  grid-template-rows: repeat(var(--num), 1fr);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.grid {
  /* 网格单元样式 */
  border: 1px solid #eee; /* 用于区分每个方格的边框 */
  box-sizing: border-box; /* 确保边框不增加元素总尺寸 */
  /* 调试时可开启以下样式，方便观察网格单元 */
  /* outline: 1px solid blue; */
}

.header {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  width: clamp(300px, 80%, 800px); /* 响应式宽度 */
  text-align: center;
  font-size: 20px;
}

.buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

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

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

.buttons input[type="number"] {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
  width: 120px;
}

关键点在于#gridContainer的display: grid;以及grid-template-columns和grid-template-rows属性。repeat(var(--num), 1fr)表示创建一个由--num个等宽（1fr）列和等高行组成的网格。1fr单位会根据可用空间自动分配，确保所有网格单元在各自维度上大小相等。

2.3 JavaScript 逻辑

JavaScript负责处理用户输入，动态设置CSS自定义属性，并生成相应数量的网格单元。

var form = document.getElementById("inputForm");
var gridContainer = document.getElementById("gridContainer");
var clearButton = document.querySelector(".clear");

// 初始化网格（可选，可以在页面加载时生成一个默认网格）
// createGrid(16); // 例如，默认生成一个16x16的网格

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

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

  // 验证输入值是否在有效范围内
  if (isNaN(num) || num < 1 || num > 64) {
    alert("请输入一个介于1到64之间的有效数字！");
    return;
  }

  createGrid(num);
});

clearButton.addEventListener("click", function() {
  // 清除所有网格单元，但不改变网格大小
  var gridCells = gridContainer.querySelectorAll(".grid");
  gridCells.forEach(cell => cell.style.backgroundColor = ''); // 或者设置为初始背景色
});


function createGrid(num) {
  // 清空现有网格内容
  gridContainer.innerHTML = "";

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

  // 通过JavaScript更新CSS自定义属性--num
  gridContainer.style.setProperty('--num', num);

  // 动态创建并添加网格单元
  for (var i = 0; i < totalBoxes; i++) {
    var div = document.createElement("div");
    div.className = "grid";
    // 添加交互，例如鼠标悬停改变背景色
    div.addEventListener("mouseover", function() {
        this.style.backgroundColor = "black";
    });
    gridContainer.appendChild(div);
  }
}

// 页面加载时生成一个默认网格，例如16x16
document.addEventListener("DOMContentLoaded", () => {
    createGrid(16);
});

这段JavaScript代码的核心功能包括：

1. 事件监听器： 监听表单的submit事件，在用户提交时触发。
2. 获取输入： 使用input.valueAsNumber安全地获取用户输入的数字，并进行基本验证。
3. 动态更新CSS变量： gridContainer.style.setProperty('--num', num);是关键一步。它将用户输入的数字num赋值给CSS自定义属性--num，从而动态地改变了CSS Grid的grid-template-columns和grid-template-rows。
4. 生成网格单元： 根据num * num计算出的总方格数，循环创建div元素并添加到gridContainer中。每个div都带有grid类，以便应用CSS样式。
5. 清除功能： clearButton的点击事件可以清空所有网格单元的背景色，模拟“Etch A Sketch”的清除功能。

3. 完整代码示例

将上述HTML、CSS和JavaScript代码组合在一起，即可实现一个功能完整的动态方格网格。

    
    
    
    


    
        
Etch A Sketch
        
            清除
            

                
                
            
        
    
    
        
    

    

4. 注意事项与总结

• CSS Grid的优势： 对于需要精确控制行和列的二维布局，CSS Grid是比Flexbox更直观和强大的选择。repeat()函数结合fr单位，使得创建等宽等高的网格单元变得非常简单。
• CSS自定义属性： 通过var(--num)和JavaScript的setProperty()方法，实现了CSS样式的动态调整，避免了直接操作大量DOM元素的样式，提高了效率和可维护性。
• 响应式设计： 将#gridContainer的width和height设置为vw（视口宽度单位），可以使网格容器及其内部的方格在不同屏幕尺寸下保持响应式。
• 用户体验： 提供了输入验证和清除功能，提升了应用的可用性。
• 交互性： 通过简单的mouseover事件监听，可以轻松为网格单元添加交互效果，如“Etch A Sketch”中的着色功能。

通过本教程，您应该能够掌握如何利用CSS Grid和JavaScript的强大组合，创建出高度动态且响应式的方格网格布局，这在许多Web应用开发场景中都非常实用。