如何让SketchPad网格自适应容器固定尺寸？

你的网格超出容器的核心原因有两个：一是.grid-item的padding和border未被纳入单元格尺寸计算，额外占用空间导致总尺寸溢出；二是调整尺寸时未清除旧网格单元格，叠加后超出容器范围。以下是针对性的修复方案：

1. 调整CSS，确保单元格尺寸精准计算 #

给单元格添加box-sizing: border-box，让border和padding完全包含在单元格的宽高内，同时移除不必要的padding避免挤占空间：

:root {
    --grid-cols: 1;
    --grid-rows: 1;
}

#container {
    width: 400px;
    height: 400px;
    display: grid;
    grid-gap: 0;
    grid-template-rows: repeat(var(--grid-rows), 1fr);
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    overflow: hidden; /* 兜底防止极端情况溢出 */
}

.grid-item {
    box-sizing: border-box; /* 关键：border和padding计入单元格尺寸 */
    border: 1px solid #ddd;
}

2. 完善JS逻辑，添加清空与验证功能 #

实现changeSize函数，每次生成新网格前清空旧单元格，同时添加输入范围验证：

const container = document.getElementById("container");
const errorElement = document.querySelector(".error");

function makeRows(rows, cols) {
    // 清空旧网格单元格
    container.innerHTML = "";
    container.style.setProperty('--grid-rows', rows);
    container.style.setProperty('--grid-cols', cols);
    for (let c = 0; c < (rows * cols); c++) {
        let cell = document.createElement("div");
        container.appendChild(cell).className = "grid-item";
    };
};

// 初始生成10x10网格
makeRows(10, 10); 

function changeSize(value) {
    const size = parseInt(value);
    // 验证输入合法性
    if (isNaN(size) || size < 2 || size > 100) {
        errorElement.style.display = "block";
        return;
    }
    errorElement.style.display = "none";
    makeRows(size, size);
}

// 补充颜色切换的基础实现
function changeColor(color) {
    const cells = document.querySelectorAll(".grid-item");
    cells.forEach(cell => {
        cell.addEventListener("mouseover", function() {
            this.style.backgroundColor = color === "random" 
                ? `rgb(${Math.floor(Math.random()*256)}, ${Math.floor(Math.random()*256)}, ${Math.floor(Math.random()*256)})`
                : color;
        });
    });
}

3. 绑定按钮点击事件，优化输入交互 #

给"Set Size"按钮添加点击触发逻辑，默认隐藏错误提示：

<div>
    <input type="text" placeholder="Size of Board" value="16" id="sizeInput" />
    <button onclick="changeSize(document.getElementById('sizeInput').value)">Set Size</button>
</div>
<div class="error" style="display: none;">Input must be between 2 and 100</div>

修复说明 #

• box-sizing: border-box让网格布局的1fr计算完全贴合容器尺寸，避免额外空间溢出；
• 每次生成新网格前清空容器，防止旧单元格叠加导致数量过载；
• 输入验证确保用户只能设置2-100之间的合法尺寸，同时提供清晰的错误提示。

内容的提问来源于stack exchange，提问作者Hls Hls