本文详细介绍了如何使用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 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 { createGrid(16);});
这段JavaScript代码的核心功能包括：
事件监听器： 监听表单的submit事件，在用户提交时触发。获取输入： 使用input.valueAsNumber安全地获取用户输入的数字，并进行基本验证。动态更新CSS变量： gridContainer.style.setProperty(‘–num’, num);是关键一步。它将用户输入的数字num赋值给CSS自定义属性–num，从而动态地改变了CSS Grid的grid-template-columns和grid-template-rows。生成网格单元： 根据num * num计算出的总方格数，循环创建div元素并添加到gridContainer中。每个div都带有grid类，以便应用CSS样式。清除功能： clearButton的点击事件可以清空所有网格单元的背景色，模拟“Etch A Sketch”的清除功能。
3. 完整代码示例
将上述HTML、CSS和JavaScript代码组合在一起，即可实现一个功能完整的动态方格网格。
动态CSS Grid方格布局 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; /* 网格容器高度，保持与宽度一致以确保方格 */ background-color: white; border: 1px solid #ccc; display: grid; /* 启用CSS Grid布局 */ grid-template-columns: repeat(var(--num), 1fr); /* 动态创建网格列 */ 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; }Etch A Sketch
var form = document.getElementById("inputForm"); var gridContainer = document.getElementById("gridContainer"); var clearButton = document.querySelector(".clear"); form.addEventListener("submit", function(e) { e.preventDefault(); // 阻止表单默认提交行为 var inputElement = form.querySelector("input[type='number']"); var num = inputElement.valueAsNumber; // 获取数字类型的输入值 // 验证输入值是否在有效范围内 if (isNaN(num) || 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 { createGrid(16); });
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应用开发场景中都非常实用。
以上就是利用CSS Grid实现动态可变尺寸的网格布局的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1538785.html
微信扫一扫 
支付宝扫一扫 
