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

利用css grid实现动态可变尺寸的网格布局

本文详细介绍了如何使用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 结构

首先，我们需要一个容器来承载我们的网格，以及一个用户输入表单来获取网格尺寸。

<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>

登录后复制

这里，#gridContainer将作为我们的CSS Grid容器，其内部的网格单元（div）将由JavaScript根据用户输入动态创建。

PatentPal专利申请写作

AI软件来为专利申请自动生成内容

查看详情

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 < 1 || 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 < totalBoxes; i++) {
    var div = document.createElement("div");
    div.className = "grid";
    // 添加交互，例如鼠标悬停改变背景色
    div.addEventListener("mouseover", function() {
        this.style.backgroundColor = "black";
    });
    gridContainer.appendChild(div);
  }
}

// 页面加载时生成一个默认网格，例如16x16
document.addEventListener("DOMContentLoaded", () => {
    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代码组合在一起，即可实现一个功能完整的动态方格网格。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态CSS Grid方格布局</title>
    <style>
        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;
        }
    </style>
</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>
        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 < 1 || 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 < totalBoxes; i++) {
                var div = document.createElement("div");
                div.className = "grid";
                // 添加交互：鼠标悬停时改变背景色
                div.addEventListener("mouseover", function() {
                    this.style.backgroundColor = "black";
                });
                gridContainer.appendChild(div);
            }
        }

        // 页面加载时生成一个默认网格，例如16x16
        document.addEventListener("DOMContentLoaded", () => {
            createGrid(16);
        });
    </script>
</body>
</html>

登录后复制

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实现动态可变尺寸的网格布局的详细内容，更多请关注php中文网其它相关文章！