'Setting strict grid size in CSS grid

I am currently trying to complete an etch-a-sketch project but am having issues with setting a grid to respect a strict size value. I want to set it so that the grid squares become smaller and the overall container remains the same however what I currently have forces the grid to go off the page.

I have tried max-height and max-width settings but these don't seem to do anything. Could someone please help me ?

Javascript Code

const button16 = document.querySelector('.smol'); 
const button24 = document.querySelector('.med'); 
const button64 = document.querySelector('.large'); 
const button = document.querySelector('.reset');
const container = document.querySelector('.container');

function row(num, columns){
    for (let i = 0; i < num; i++){
        const div = document.createElement('div')
        container.appendChild(div);

        for (let i = 0; i < columns; i++){
            const div2 = document.createElement('div2', );
            div.appendChild(div2);
        }
    }
}

hover(row(16, 16))
button16.addEventListener('click', () => {
    clearGrid();
    hover(row(16, 16))
});
button24.addEventListener('click', () => {
    clearGrid();
    hover(row(24, 24))
});
button64.addEventListener('click', () => {
    clearGrid();
    hover(row(64, 64))
});

function hover() {
    const wrapper2 = container.querySelectorAll('div2');

    wrapper2.forEach(wrapper2 => wrapper2.addEventListener('mouseenter', () => {
        const hash = '#';
        let randomColor = Math.floor(Math.random()*16777215).toString(16); 
        wrapper2.style.backgroundColor = hash + randomColor;
    }));

    wrapper2.forEach(wrapper2 => button.addEventListener("click", () => {
        wrapper2.style.backgroundColor = 'white';
    }));
}
function clearGrid() {          
    container.innerHTML = null
}

My CSS

.container {
    display: grid;
    grid-template-columns:repeat(64, 1fr);
    width: 500px;
    height: 500px; 
 
}
div2 {
    border: solid 0.1px;
    color: #424242;
    display: grid;
    width:30px;
    height: 25px;
    box-sizing: border-box  
}

.buttonbox {
    display: flex;
    width: 500px;

}
.reset, .smol, .med, .large {
    padding: 5px;


}

My html

 <!DOCTYPE HTML>
<html lan="en">

    <head>
    <meta charset = utf-8>
    <link rel= 'stylesheet' href="Styles.css" ></script>
    <script src = GameLogic.js defer></script>
    <title>My Etch-A-Sketch Project</title>
    </head>
    <body>
        <h1>Etch-A-Sketch</h1>
        <div class = "container">
        </div>
        <div class = 'buttonbox'>
        <button class="reset">
            Clear Grid
        </button>
        <button class="smol">
            16 x 16
        </button>
        <button class="med">
            24 x 24
        </button>
        <button class="large">
            64 x 64
        </button>
        </div>
    </body>
</html>
javascriptcss


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions