Etch-A-Sketch: CSS Styling difficulties

I have created my div elements successfully with javascript (as far as I can tell), but I am having trouble applying basic CSS styling properties to my divs.

Can’t make the divs into a grid format, currently, it is 256 rows rather than a 16x16 grid.
Can’t apply borders to my divs and container elements.

Doesn’t seem to be any issues in devtools and can’t find the specific help on google.

JavaScript, CSS:

const container = document.querySelector('#container');

function createGrid(rows, cols) {
    container.style.setProperty('--grid-rows', rows);
    container.style.setProperty('--grid-columns', cols);

    for(i = 0; i <=(rows * cols); i++) {
        const gridBox = document.createElement('div');
        container.appendChild(gridBox).classList.add('gridBox');
    }
}

createGrid(16,16);

:root {
–grid-columns: 1;
–grid-rows: 1;
}

html {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}

#container {
display: grid;
grid-template-columns: repeat(var(–grid-columns, 1fr));
grid-template-rows: repeat(var(–grid-rows, 1fr));
width: 500px;
height: 500px;
border: .25px black;
margin: 1% auto;

}

.gridBox {
transition: .1s;
border: .1px #2F4F4F;
}

Any assistance would be much appreciated.

Thanks.

The best way to get a good answer is to put all of your code online using repl.it and then post the link. A lot of people like to see the whole picture & even play around with the code to check their theories. Plus, I’d like to use the developer tools to figure out what is going on. First, I would select the #container to see if all your styes are applying correctly

For example, it looks like you are might have incorrect syntax on this line: grid-template-rows: repeat(var(–grid-rows, 1fr)); because I think it should be grid-template-rows: repeat(var(--grid-rows), 1fr);

Also, if you are using VS Code or another code editors, it should have some squiggly lines with these lines that show this syntax error.

2 Likes

Thanks, that’s super helpful. Will definitely utilise repl.it moving forward, been wondering whats the best way to share code.

That was correct, the syntax change did fix my problem! Thanks for your help, will have another go on cracking the borders now that I have a solution for the grid container.