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

使用 CSS Grid 实现动态可变尺寸的方格布局教程

心靈之曲

发布： 2025-11-14 14:28:02

原创

995人浏览过

使用 CSS Grid 实现动态可变尺寸的方格布局教程

本教程将详细介绍如何利用 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;
}

登录后复制

关键点解析：

飞书多维表格

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

查看详情

#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 对于现代前端开发至关重要。

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