Odin项目Etch-a-sketch：CSS Grid设置后底部留白问题求助

问题现象 #

完成Odin项目的Etch-a-sketch练习时，点击设置网格大小的按钮后，输入部分数值时网格底部会出现大量留白，怀疑是CSS的fr规则导致，但不知道如何解决。

相关代码 #

setGridSize函数 #

function setGridSize() {
    gridSize = parseInt(prompt("Enter how many rows/columns you'd like."));
    grid.style.gridTemplateRows = `repeat(${gridSize}, 1fr)`;
    grid.style.gridTemplateColumns = `repeat(${gridSize}, 1fr)`;
    createGrid(gridSize);
}

createGrid函数 #

function createGrid(size) {
    for(let i = 0; i < (size * size); i++) {
        const cell = document.createElement("div");
        cell.style.width = (parseInt(grid.style.width)) / size; 
        cell.style.height = (parseInt(grid.style.height)) / size;
        cell.addEventListener("mouseover", (event) => {
            event.target.style.backgroundColor = getRandomColor();
        });
        cell.classList.add("cell");
        grid.appendChild(cell);
    }
}

完整可运行代码 #

JavaScript

const grid = document.querySelector(".grid");
const gridSizeBtn = document.querySelector("#gridSizeBtn");
let gridSize = 0; 
gridSizeBtn.addEventListener("click", setGridSize);


function createGrid(size) {
    for(let i = 0; i < (size * size); i++) {
        const cell = document.createElement("div");
        cell.style.width = (parseInt(grid.style.width)) / size; 
        cell.style.height = (parseInt(grid.style.height)) / size;
        cell.addEventListener("mouseover", (event) => {
            event.target.style.backgroundColor = getRandomColor();
        });
        cell.classList.add("cell");
        grid.appendChild(cell);
    }
}

function setGridSize() {
    gridSize = parseInt(prompt("Enter how many rows/columns you'd like."));
    grid.style.gridTemplateRows = `repeat(${gridSize}, 1fr)`;
    grid.style.gridTemplateColumns = `repeat(${gridSize}, 1fr)`;
    createGrid(gridSize);
}

function getRandomColor() {
    let x = Math.floor(Math.random() * 256);
    let y = Math.floor(Math.random() * 256);
    let z = Math.floor(Math.random() * 256);
    return color = "rgb(" + x + "," + y + "," + z + ")";
}

CSS

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#gridSizeBtn {
    font-size: 30px;
    margin: 50px;
}

.grid {
    display: grid;
    width: 800px;
    height: 800px;
    margin-bottom: 50px;
}

.cell {
    border: 1px solid black;
    background-color: lightgray;
}

HTML

<button id="gridSizeBtn">Set grid size!</button>
<div class="grid"></div>

问题原因 #

1. 重复创建单元格：每次点击设置按钮时，未清空旧网格，新单元格追加到旧单元格后，总行数远超设定的gridSize，但gridTemplateRows仅设置了gridSize个1fr行，多余单元格被挤到网格外，造成底部留白。
2. 布局规则冲突：同时使用CSS Grid的1fr自动分配行列，又手动设置单元格宽高，加上单元格边框的尺寸影响，导致布局逻辑混乱，加剧留白问题。

解决方案 #

1. 清空旧网格 #

每次创建新网格前，先移除所有旧单元格：

function setGridSize() {
    gridSize = parseInt(prompt("Enter how many rows/columns you'd like."));
    // 清空旧单元格
    grid.innerHTML = '';
    grid.style.gridTemplateRows = `repeat(${gridSize}, 1fr)`;
    grid.style.gridTemplateColumns = `repeat(${gridSize}, 1fr)`;
    createGrid(gridSize);
}

2. 移除手动设置的单元格宽高 #

CSS Grid的1fr规则会自动让单元格填满对应网格区域，无需手动计算尺寸：

function createGrid(size) {
    for(let i = 0; i < (size * size); i++) {
        const cell = document.createElement("div");
        cell.addEventListener("mouseover", (event) => {
            event.target.style.backgroundColor = getRandomColor();
        });
        cell.classList.add("cell");
        grid.appendChild(cell);
    }
}

3. 优化边框盒模型（可选） #

添加box-sizing: border-box让边框包含在单元格尺寸内，避免溢出：

.cell {
    border: 1px solid black;
    background-color: lightgray;
    box-sizing: border-box;
}

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