如何使网格即使在值发生变化时也保持固定大小？

Question

我正在创建蚀刻草图。目前，我弄清楚了如何创建网格宽度用户输入值。但是当值改变时，网格大小也会改变。 我想让网格的宽度在单元格值发生变化时保持不变。为此我应该做什么呢。我尝试调整网格模板的行和列。没成功

谢谢你

这是我的代码

.grid{
    padding: 10px;
    display: inline-grid;
    justify-content: center;
    border: 1px solid black;
    gap: 1px;
}

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

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



//div for buttons
const buttonDiv = document.createElement('div');
buttonDiv.classList.add('button-div');
container.appendChild(buttonDiv);

//A button to reset Everything
const resetButton = document.createElement('button');
resetButton.textContent = 'Reset';
buttonDiv.appendChild(resetButton);

//grid in a seperate div
const grid = document.createElement('div');
grid.classList.add('grid');
container.appendChild(grid);

//function to create grid
function makeGrid(value){
    let gridWidth = 200 / value;
    grid.style.gridTemplateColumns = `repeat(${value}, ${gridWidth}px)`;
    grid.style.gridTemplateRows = `repeat(${value}, ${gridWidth}px)`;
    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);
        }
    }
}


//to change the cell color to black on mouseover
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)};

Answer 1

我复制并粘贴了您问题中的代码以创建 jsfiddle：https://jsfiddle.net/k8ebmqd4/

到目前为止，您创建的是固定大小的

.grid

，其中内部

div.cell

的数量和大小根据用户输入而变化。 正确理解你的问题，这不是你想要的。

div.cell

应始终保持 12.5x12.5 （这就是我在小提琴上看到的）。 如果是这种情况，只需更改此行：

let gridWidth = 200 / value;

至：

let gridWidth = 12.5;

现在

.grid

的大小取决于其中的单元格数量。

根据下面的评论解决方案：从

gap

中删除

.grid

样式并为

.cell

添加边框：

.cell{border:1px solid #FFFFFF;}

。请参阅：https://jsfiddle.net/t5akxof2/

Answer 2

你可以用这个：

// Container for columns
.h-container {
  display: flex;
  flex-flow: column;
  height: 100%;
}

// Container for rows
.w-container {
  display: flex;
  flex-flow: row;
  height: 100%;
}

.container-needed {
  flex: 0 1 auto;
}

.container-rest {
  flex: 1 1 auto;
  overflow: hidden;
}

HTML

<div class="w-container">

  <div class="container-needed"> </div>

  <div class=container-rest> </div>

</div>

有了这个，第一个元素需要多少，第二个元素需要多少，如果你愿意，你可以添加两个以上...... 容器可以是固定大小的