eclipse 刻草图:列将调整大小,但行不会,(CSS网格)

zdwk9cvp  于 2023-02-17  发布在  Eclipse
关注(0)|答案(1)|浏览(218)

我正在创建一个Etch-A-Sketch项目,作为Odin项目基础课程的一部分。我创建了一个16x16的网格,网格中的单元格数量将根据用户对提示符的输入而变化。
我的问题是列中的单元格数量会改变,但行中的单元格数量不会改变,这导致etch-a-sketch pad由矩形而不是均匀放置的正方形组成。
例如:如果用户输入"32",每列将有32个单元格。但仍然只有16列。我需要网格是32x32而不是32x16。

const container = document.querySelector("#container");
const buttonSize = document.querySelector("#gridsize");
const buttonRainbow = document.querySelector("#gridsize");
let cell = document.querySelectorAll('.cell');
let cellAmount = 16;
window.onload = createGrid(cellAmount);
cell.onmouseover = mouseOver();

// creates a 16x16 grid
function createGrid(e){
    for (let i = 0; i < e*e; i++){
        const div = document.createElement("div");
        div.classList.add("cell");
        container.appendChild(div);
    }
}

// changes cell colors to black on mouseover
function mouseOver(){
    let cell = document.querySelectorAll('.cell');
    cell.forEach((cell) => {
        cell.addEventListener('mouseover', function(){
            cell.style.background = "black";
        })
    })
}

// resizes the grid and resets sketch
buttonSize.addEventListener('click', () => {
    for (i = 0; i < cell.length; i++){
        cell[i].style.removeProperty("black")
    } 
        let userAmount = prompt("Select your pixel size (Default: 16)");
        if (userAmount == ""){
            userAmount == 16;
        }
        while (parseInt(userAmount) < 4 || parseInt(userAmount) > 100){
            userAmount = prompt("Sorry, please enter a number between 4 and 100.");
        }
        cellAmount = parseInt(userAmount);
        while (container.hasChildNodes()){
            container.removeChild(container.firstChild);
        }
        createGrid(cellAmount);
        mouseOver();
});
#container {
    margin-top: 25px;
    display: inline-grid;
    grid-template-columns: repeat(16, 1fr);
    grid-template-rows: auto;
    border: 7.5px solid black;
    border-radius: 10px;
    height: 575px;
    width: 575px;
    box-sizing: border-box;
}

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

#title {
    display: flex;
    background-color: crimson;
    justify-content: center;
    width: 270px;
    height: 72px;
    margin-left: 815px;
    margin-top: 50px;
    border-style: solid aqua;
    border-radius: 35px;
    font-size: small;
}

#buttons {
    display: flex;
    justify-content: center;
    gap: 75px;
    margin-top: 40px;
}

#gridsize {
    background: black;
    color: white;
    border: none;
    width: 100px;
    height: 30px;
    font-size: large;
    border-radius: 20px;
    font-weight: bold;
}

#rainbow {
    background: black;
    color: white;
    border: none;
    width: 100px;
    font-size: large;
    font-weight: bold;
    border-radius: 20px;
}

#tipmessage {
    text-align: center;
    margin-top: 40px;
}

html {
    background-color: snow;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <title>Etch-A-Sketch.</title>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
     
        <div id="title">
            <h1>Etch-A-Sketch. &#128397</h1>
        </div>
        

        <div id="buttons">
            <button id="gridsize">Size</button>
            <button id="rainbow">Rainbow</button>
        </div>
        

        <div id="container"></div>

        <div id="tipmessage">
            <h3><em>'We don't make mistakes, just happy little accidents' - Bob Ross</em></h3>
        </div>

    </body>

    <script src="script.js" defer></script>

</html>

我试过改变#container的CSS网格属性,但这并没有解决问题。我检查了我的JS,但似乎不能弄清楚问题是来自JS,还是CSS。
例如,我尝试将CSS网格的列和行更改为"auto",但这完全破坏了网格。

pgpifvop

pgpifvop1#

问题来自CSS。此部分:

#container{
    ...
    grid-template-columns: repeat(16, 1fr);
    ...
}

因为grid-template-columns数量是硬编码到样式表中的,所以它不会随着从用户接收到的新网格大小而改变。如果列数量设置为33,然后您通过浏览器工具编辑grid-template-columns以匹配33,则创建的div将显示为正方形。
正如所写的,网格中 * 必须 * 有16列,不能多也不能少。
因此,当调用创建网格的函数时,必须编辑#container的grid-template-columns属性,以便容器的grid-template-columns随网格中单元格的数量沿着更新。

function createGrid(e){
    container.style.gridTemplateColumns = `repeat(${e},1fr)`  // This will make the divs square
    for (let i = 0; i < e*e; i++){
        const div = document.createElement("div");
        div.classList.add("cell");
        container.appendChild(div);
    }

}

相关问题