如何在单元格数量变化时保持Etch-a-Sketch网格尺寸固定？

问题根源 #

你当前的实现通过手动计算单元格像素宽度来构建网格，但gap的存在会让网格总宽度变为单元格总宽度 + 间隙总宽度，导致单元格数量变化时总宽度波动；同时inline-grid会让容器宽度自适应内容，进一步加剧尺寸变化问题。

解决步骤 #

1. 给网格容器设置固定宽度 #

修改.grid的CSS，添加固定宽度，确保容器尺寸不随内容变化：

.grid{
    padding: 10px;
    display: grid;
    width: 200px; /* 设置你需要的固定宽度 */
    border: 1px solid black;
    gap: 1px;
}

2. 使用fr单位自动分配单元格空间 #

无需手动计算单元格宽度，改用1fr单位让每个单元格自动平分网格的可用空间（自动扣除间隙宽度），修改makeGrid函数：

function makeGrid(value){
    grid.style.gridTemplateColumns = `repeat(${value}, 1fr)`;
    grid.style.gridTemplateRows = `repeat(${value}, 1fr)`;
    for(let i = 0; i < value; i++){
        for(let j = 0; j < value; j++){
        const cell = document.createElement('div');
        cell.classList.add('cell');
        cell.addEventListener('mouseover', toBlack);
        grid.appendChild(cell);
        }
    }
}

3. 可选：保持单元格为正方形 #

如果需要单元格始终是正方形，给.cell添加aspect-ratio: 1属性：

.cell {
    aspect-ratio: 1;
}

完整修改后的代码 #

CSS部分 #

.grid{
    padding: 10px;
    display: grid;
    width: 200px;
    border: 1px solid black;
    gap: 1px;
}

.button-div{
    padding: 10px;
    display: flex;
    justify-content: center;
}

.cell {
    aspect-ratio: 1;
}

JavaScript部分 #

const container = document.getElementById('container');

// 按钮容器
const buttonDiv = document.createElement('div');
buttonDiv.classList.add('button-div');
container.appendChild(buttonDiv);

// 重置按钮
const resetButton = document.createElement('button');
resetButton.textContent = 'Reset';
buttonDiv.appendChild(resetButton);

// 网格容器
const grid = document.createElement('div');
grid.classList.add('grid');
container.appendChild(grid);

// 创建网格函数
function makeGrid(value){
    grid.style.gridTemplateColumns = `repeat(${value}, 1fr)`;
    grid.style.gridTemplateRows = `repeat(${value}, 1fr)`;
    for(let i = 0; i < value; i++){
        for(let j = 0; j < value; j++){
        const cell = document.createElement('div');
        cell.classList.add('cell');
        cell.addEventListener('mouseover', toBlack);
        grid.appendChild(cell);
        }
    }
}

// 鼠标悬停变黑色
function toBlack(e){
    e.target.style.backgroundColor = 'black';
}

// 重置网格
function resetGrid(){
    const value = prompt('Input a number of Squares');
    grid.innerHTML = '';
    makeGrid(value);
}

resetButton.addEventListener('click',resetGrid);

window.onload = () => {makeGrid(16)};

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