本教程将详细介绍如何利用 css grid 和 javascript 创建一个动态、响应式的方格布局，该布局能根据用户输入自动调整方格数量和尺寸，始终填充其父容器。我们将通过一个“画板”游戏的案例，展示 css grid 在二维布局上的强大优势，并对比其与 flexbox 在此场景下的适用性，提供完整的代码示例和实现步骤。
1. 引言：动态方格布局的挑战
在网页开发中，我们经常需要创建网格状的布局，其中每个单元格（或“方格”）的尺寸需要根据父容器和用户输入动态调整，同时保持正方形比例。例如，在一个“画板”应用中，用户输入一个数字 N，程序就需要生成一个 N x N 的方格网格，且每个方格应等宽等高，并均匀分布在父容器中。尝试使用 Flexbox 实现这种二维布局时，尤其是在不固定每个子元素宽高的情况下，可能会遇到子元素无法正确换行或无法保持正方形比例的问题。CSS Grid 提供了一种更直观、更强大的解决方案来处理此类复杂的二维布局。
2. CSS Grid 解决方案概览
CSS Grid 布局是专门为二维布局设计的，它允许我们定义行和列，并精确控制子元素在网格中的位置和尺寸。结合 CSS 变量和 JavaScript，我们可以轻松实现一个动态可变的方格网格。核心思路是：
- 使用 CSS Grid 定义容器为网格布局。
- 利用 CSS 变量动态设置网格的列数和行数。
- 通过 JavaScript 获取用户输入，更新 CSS 变量，并根据输入动态生成相应数量的网格单元。
3. HTML 结构构建
首先，我们需要一个包含控制按钮和网格容器的基本 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">
<!-- 动态生成的方格将放置在此处 -->
</div>
<script src="script.js"></script>
</body>
</html>这里，#gridContainer 是我们的核心网格容器。inputForm 用于获取用户输入的网格维度。
立即学习“前端免费学习笔记（深入）”；
4. CSS 样式定义：核心是 Grid 布局
CSS 是实现动态网格的关键。我们将使用 display: grid 和 grid-template-columns、grid-template-rows 属性，并结合 CSS 变量来实现动态调整。
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;
}
.header {
display: flex;
flex-direction: column;
margin-bottom: 15px;
width: 800px; /* 或根据需要调整 */
text-align: center;
font-size: 24px;
}
.buttons {
display: flex;
justify-content: space-between;
margin-top: 10px;
}
button, input[type="submit"] {
padding: 8px 15px;
border: none;
background-color: #007bff;
color: white;
cursor: pointer;
border-radius: 4px;
font-size: 16px;
}
input[type="number"] {
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
width: 150px;
}
#gridContainer {
/* 定义一个 CSS 变量 --num，用于控制网格的列数和行数 */
--num: 1; /* 默认值，避免初始显示错误 */
width: 50vw; /* 占据视口宽度的50% */
height: 50vw; /* 保持正方形，与宽度相同 */
max-width: 800px; /* 限制最大宽度 */
max-height: 800px; /* 限制最大高度 */
background-color: white;
display: grid; /* 启用 CSS Grid 布局 */
/* 根据 --num 变量创建等宽的列和等高的行 */
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 {
/* 网格单元格的样式 */
/* 为了测试，可以添加边框来可视化每个方格 */
/* outline: 1px solid rgba(0, 0, 0, 0.1); */
background-color: #eee; /* 默认背景色 */
transition: background-color 0.1s ease; /* 添加过渡效果 */
}
/* 鼠标悬停时的样式，模拟画笔效果 */
.grid.active {
background-color: #333;
}关键点解析：
- #gridContainer 的 width 和 height 设置为 50vw，使其保持正方形并响应视口大小。同时设置 max-width 和 max-height 防止过大。
- --num: 1; 定义了一个 CSS 变量，其值将通过 JavaScript 动态更新。
- display: grid; 声明了 #gridContainer 是一个网格容器。
- grid-template-columns: repeat(var(--num), 1fr); 和 grid-template-rows: repeat(var(--num), 1fr); 是实现动态网格的核心。repeat() 函数根据 --num 的值创建相应数量的列和行，1fr 表示每个轨道占据可用空间的一等份，确保所有方格等宽等高。
5. JavaScript 动态控制逻辑
JavaScript 负责处理用户输入、动态生成 DOM 元素以及更新 CSS 变量。
document.addEventListener("DOMContentLoaded", function() {
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", function() {
// 清除所有方格的激活状态
const gridItems = gridContainer.querySelectorAll(".grid");
gridItems.forEach(item => {
item.classList.remove("active");
});
});
/**
* 根据给定的维度生成网格
* @param {number} num - 网格的行数和列数
*/
function generateGrid(num) {
// 清空现有网格内容
gridContainer.innerHTML = "";
// 更新 CSS 变量，这将自动调整网格的列数和行数
gridContainer.style.setProperty('--num', num);
// 计算需要生成的方格总数
const totalBoxes = num * num;
// 动态创建并添加方格元素
for (let i = 0; i < totalBoxes; i++) {
const div = document.createElement("div");
div.className = "grid";
div.addEventListener("mouseover", function() {
div.classList.add("active"); // 鼠标悬停时添加激活类
});
gridContainer.appendChild(div);
}
}
});关键点解析：
- form.addEventListener("submit", ...) 监听表单提交事件。
- e.preventDefault(); 阻止页面刷新。
- let num = parseInt(input.value); 获取用户输入的数字。
- gridContainer.style.setProperty('--num', num); 是核心操作，它通过 JavaScript 更新了 CSS 变量 --num 的值。当这个变量更新时，CSS 规则 grid-template-columns: repeat(var(--num), 1fr); 会自动重新计算并调整网格布局。
- 循环 for (let i = 0; i < totalBoxes; i++) 动态创建 div 元素，并将其添加到 gridContainer 中。
- 为每个方格添加 mouseover 事件监听器，实现“画笔”效果。
6. Flexbox 与 CSS Grid 的选择考量
在尝试创建这种动态方格布局时，初学者可能会首先想到 Flexbox。然而，Flexbox 主要用于一维布局（行或列），虽然可以通过 flex-wrap: wrap 实现换行，但要让每个子元素在保持正方形比例的同时，又能在不知道总行数和列数的情况下均匀填充容器，会非常复杂，甚至需要复杂的 JavaScript 计算。
CSS Grid 的优势：
- 原生二维布局支持： Grid 天生为二维布局设计，能够同时控制行和列。
- 语义清晰： grid-template-columns 和 grid-template-rows 直接表达了网格的结构。
- 响应式设计： 结合 fr 单位和 repeat() 函数，很容易创建响应式的等分网格。
- CSS 变量集成： 能够与 CSS 变量完美结合，实现动态布局调整。
对于需要精确控制行和列的复杂网格布局，CSS Grid 无疑是更优的选择。Flexbox 则更适合于组件内部的对齐、分布和排序。
7. 注意事项与最佳实践
- 输入验证： 务必对用户输入进行严格验证（例如，确保数字在有效范围内），以防止生成过大或无效的网格，影响性能或导致页面崩溃。
- 性能优化： 对于非常大的网格（例如，100x100 或更大），动态生成大量 DOM 元素可能会影响页面性能。在这种情况下，可以考虑虚拟滚动或更高级的渲染技术。
- 可访问性： 确保交互元素（如按钮、输入框）具有适当的 ARIA 属性和键盘导航支持。
- 清除功能： 提供一个“清除”按钮来重置画板状态，提高用户体验。
- 样式分离： 将 CSS、JavaScript 和 HTML 保持在各自的文件中，提高代码的可维护性。
8. 总结
通过本教程，我们学习了如何利用 CSS Grid 布局的强大功能和 JavaScript 的动态控制能力，创建一个响应式且可根据用户输入调整尺寸的方格网格。CSS Grid 在处理复杂的二维布局时表现出卓越的优势，它提供了一种声明式且直观的方式来定义网格结构，极大地简化了动态布局的实现。掌握 CSS Grid 对于现代前端开发至关重要。
