使用 CSS Grid 创建动态可变尺寸的方格布局-js教程-PHP中文网

使用 CSS Grid 创建动态可变尺寸的方格布局

花韻仙語

发布： 2025-11-14 17:38:41

原创

982人浏览过

使用 css grid 创建动态可变尺寸的方格布局

本教程详细讲解如何利用 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 动态生成。

飞书多维表格

表格形态的AI工作流搭建工具，支持批量化的AI创作与分析任务，接入DeepSeek R1满血版

查看详情

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 对于构建现代、响应式和复杂布局的网页至关重要。

以上就是使用 CSS Grid 创建动态可变尺寸的方格布局的详细内容，更多请关注php中文网其它相关文章！