本教程详细讲解如何利用 CSS Grid 布局实现一个可根据用户输入动态调整尺寸和数量的方格网格。我们将探讨为何 CSS Grid 是实现二维网格布局的理想选择，而非 Flexbox，并通过 HTML、CSS 和 JavaScript 的综合示例，展示如何动态生成网格单元，并利用 CSS 自定义属性灵活控制网格的行与列，确保方格始终填满容器并保持正方形比例。
在网页开发中，创建动态的、响应式的网格布局是一个常见需求，尤其是在实现像 Etch-A-Sketch 这类需要用户输入来决定网格尺寸的应用时。当目标是创建一个 N x N 的正方形网格，并且每个小方格都应自动调整大小以填满其父容器时，CSS Grid 提供了比 Flexbox 更强大和直观的解决方案。
为什么选择 CSS Grid 而非 Flexbox？
Flexbox 主要用于一维布局（行或列），虽然可以通过 flex-wrap 实现多行多列效果，但在精确控制行和列的数量以及单元格的二维对齐方面，会显得力不从心。例如，要确保一个 N x N 的网格中的每个单元格都是正方形，并且无论 N 值如何变化都能均匀分布，Flexbox 需要复杂的计算或额外的样式技巧。
相比之下，CSS Grid 专为二维布局设计，能够直接定义行和列的数量及大小，完美契合创建这种动态方格网格的需求。
立即学习“前端免费学习笔记（深入）”；
实现动态方格网格的步骤
我们将通过 HTML 结构、CSS 样式和 JavaScript 逻辑三部分来构建这个动态方格网格。
1. HTML 结构
首先，我们需要一个主容器来容纳所有的网格单元，以及一个用户输入表单来获取网格的维度。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态方格网格</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<h1>Etch A Sketch</h1>
<div class="buttons">
<button class="clear">清空</button>
<form id="inputForm">
<input type="number" class="number" min="1" max="64" placeholder="输入数字 1-64">
<input type="submit" value="生成网格">
</form>
</div>
</div>
<div id="gridContainer">
<!-- 网格单元将由 JavaScript 动态生成 -->
</div>
<script src="script.js"></script>
</body>
</html>#gridContainer 将作为我们网格的父容器，其内部的网格单元 (.grid div) 将由 JavaScript 动态生成。
2. CSS 样式
CSS 是实现网格布局的关键。我们将使用 display: grid 和 CSS 自定义属性来动态控制网格的行和列。
body {
background-color: #f0f0f0;
min-height: 100vh;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
font-family: 'Arial', sans-serif;
margin: 0;
}
h1 {
margin: 0;
color: #333;
}
.header {
display: flex;
flex-direction: column;
margin-bottom: 15px;
width: 800px; /* 或根据需要调整 */
text-align: center;
font-size: 24px;
}
.buttons {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
}
.buttons button, .buttons input[type="submit"] {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border: none;
border-radius: 5px;
background-color: #007bff;
color: white;
transition: background-color 0.3s ease;
}
.buttons button:hover, .buttons input[type="submit"]:hover {
background-color: #0056b3;
}
.buttons input[type="number"] {
padding: 8px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
width: 150px;
}
#gridContainer {
/* 定义一个 CSS 自定义属性 --num，用于存储网格的维度 */
--num: 1; /* 默认值为1，避免初始渲染错误 */
width: 50vw; /* 占据视口宽度的一半 */
height: 50vw; /* 保持正方形，高度与宽度一致 */
max-width: 800px; /* 最大宽度限制 */
max-height: 800px; /* 最大高度限制 */
background-color: white;
display: grid; /* 启用 CSS Grid 布局 */
/* 使用 repeat() 和 var() 动态设置行和列的数量 */
grid-template-columns: repeat(var(--num), 1fr);
grid-template-rows: repeat(var(--num), 1fr);
border: 1px solid #ddd;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.grid {
/* 每个网格单元的样式 */
border: 1px solid #eee; /* 用于测试和视觉分隔 */
background-color: #f9f9f9;
/* 在 Etch-A-Sketch 游戏中，这里可能还会添加鼠标悬停改变背景色的逻辑 */
}关键 CSS 解释：
- #gridContainer：
- --num: 1;：声明一个 CSS 自定义属性 --num，它的值将由 JavaScript 动态更新。
- width: 50vw; height: 50vw;：设置容器的宽度和高度都为视口宽度的 50%，这样可以确保容器本身是正方形，从而内部的网格单元也更容易保持正方形。
- display: grid;：将容器设置为网格布局。
- grid-template-columns: repeat(var(--num), 1fr);：定义网格的列。repeat() 函数根据 --num 的值重复生成列，1fr 表示每列占据可用空间的一等份，确保所有列等宽。
- grid-template-rows: repeat(var(--num), 1fr);：定义网格的行。与列类似，确保所有行等高。
3. JavaScript 动态控制
JavaScript 负责处理用户输入，动态生成网格单元，并更新 CSS 自定义属性以调整网格布局。
document.addEventListener("DOMContentLoaded", () => {
const form = document.getElementById("inputForm");
const gridContainer = document.getElementById("gridContainer");
const clearButton = document.querySelector(".clear");
// 初始生成一个默认网格，例如 16x16
generateGrid(16);
form.addEventListener("submit", function(e) {
e.preventDefault(); // 阻止表单默认提交行为
const input = form.querySelector("input[type='number']");
let num = parseInt(input.value); // 获取用户输入的数字
// 验证输入值是否在有效范围内
if (isNaN(num) || num < 1 || num > 64) {
alert("请输入一个介于 1 到 64 之间的数字。");
input.value = ""; // 清空输入框
return;
}
generateGrid(num);
});
clearButton.addEventListener("click", () => {
// 清空网格内容，但保留网格结构（可选，根据需求）
// 对于 Etch-A-Sketch，可能需要重置所有方格的颜色
const gridCells = gridContainer.querySelectorAll(".grid");
gridCells.forEach(cell => {
cell.style.backgroundColor = '#f9f9f9'; // 恢复默认背景色
});
});
/**
* 根据给定的维度生成网格
* @param {number} dimension 网格的行/列数量
*/
function generateGrid(dimension) {
// 清空现有网格内容
gridContainer.innerHTML = "";
// 更新 CSS 自定义属性 --num，动态改变网格布局
gridContainer.style.setProperty('--num', dimension);
// 计算总的网格单元数量
const totalBoxes = dimension * dimension;
// 循环创建网格单元并添加到容器中
for (let i = 0; i < totalBoxes; i++) {
const div = document.createElement("div");
div.className = "grid";
// 添加 Etch-A-Sketch 游戏的交互逻辑，例如鼠标悬停变色
div.addEventListener("mouseover", () => {
div.style.backgroundColor = '#333'; // 示例：鼠标悬停变黑
});
gridContainer.appendChild(div);
}
}
});关键 JavaScript 解释：
- form.addEventListener("submit", ...)：监听表单提交事件。
- e.preventDefault();：阻止表单提交后页面刷新。
- let num = parseInt(input.value);：获取用户输入的数字，并转换为整数。
- gridContainer.style.setProperty('--num', num);：这是核心。通过 JavaScript 更新 #gridContainer 元素的 --num 自定义属性。由于 CSS 中的 grid-template-columns 和 grid-template-rows 使用了 var(--num)，这个改变会立即反映在网格布局上，动态调整行和列的数量。
- gridContainer.innerHTML = "";：在生成新网格之前，清空容器内所有旧的网格单元。
- 循环创建 div 元素：根据 num * num 计算出的总数，创建相应数量的 div 元素，并赋予 grid 类名，然后添加到 gridContainer 中。
完整代码示例
将上述 HTML、CSS 和 JavaScript 代码分别保存为 index.html、style.css 和 script.js，并在同一个目录下，即可运行。
注意事项与最佳实践
- CSS Grid 的优势：对于需要精确控制二维布局（行和列）的场景，CSS Grid 是首选。它提供了一套完整的属性来定义网格线、网格区域和单元格的放置，远超 Flexbox 的能力。
- CSS 自定义属性 (CSS Variables)：结合 JavaScript 动态修改 CSS 样式时，CSS 自定义属性非常强大。它们允许你将值存储在变量中，并在 CSS 规则中使用，然后通过 JavaScript 轻松更新这些变量，从而实现动态样式调整。
- 性能考虑：当网格单元数量非常大时（例如，64x64 意味着 4096 个 div 元素），DOM 操作可能会对性能产生影响。虽然对于大多数 Etch-A-Sketch 游戏来说这可以接受，但在更复杂的应用中，可能需要考虑虚拟滚动或更优化的 DOM 更新策略。
- 可访问性：确保动态生成的元素仍然具有良好的可访问性。例如，如果网格单元具有交互功能，应考虑使用适当的 ARIA 属性。
- 浏览器兼容性：CSS Grid 布局在现代浏览器中得到了广泛支持。如果需要支持旧版浏览器，可能需要提供回退方案或使用 Autoprefixer 等工具。
总结
通过本教程，我们学习了如何利用 CSS Grid 布局、CSS 自定义属性和 JavaScript 动态生成并控制一个可变尺寸的方格网格。这种方法不仅解决了 Flexbox 在二维网格布局中的局限性，还提供了一种高效且易于维护的解决方案，适用于 Etch-A-Sketch 等需要动态网格交互的应用。掌握 CSS Grid 对于构建现代、响应式和复杂布局的网页至关重要。
