CSS Grid is being overwritten and I don't know why

Question

I am trying to create a 4 x 4 grid of 16 squares(divs). I have made the container div with a grid display. The 16 squares are in rows but when I try to make 4 columns it has a strikethrough in the styles tab of the dev tools.

Here is what I have in my CSS:

html,body{
    height: 100%;
    margin: none;
}

#heading{
    height: 250px;
}


#wrapper{
    width: 600px;
    height: 600px;
    margin-left: auto;
    margin-right: auto;
}

#container{
    border: solid 1px;
    display: grid;
    grid-template-columns: 25%, 25%, 25%, 25%;
    height: 600px;
    width: auto;
}

.squares{
    border: solid 1px rgba(0, 0, 0, 0.3);
}

They 16 child divs are created with JS. Would that have an impact on why grid is not working as expected?

let x = 0;

do{
    const square = document.createElement("div");
square.className = "squares";
square.setAttribute("id","block");
    document.getElementById("container").appendChild(square);
    x++;
}
while(x < 16);

Answer 1

No need for the , between the grid-template-columns values. You can also change it to auto instead of doing the calculation yourself if they are all the same and specify 25% . take a look now

 let x = 0; do{ const square = document.createElement("div"); square.className = "squares"; square.setAttribute("id","block"); document.getElementById("container").appendChild(square); x++; } while(x < 16);

 html,body{ height: 100%; margin: none; } #heading{ height: 250px; } #wrapper{ width: 600px; height: 600px; margin-left: auto; margin-right: auto; } #container{ border: solid 1px; display: grid; grid-template-columns: auto auto auto auto; height: 600px; width: auto; } .squares{ border: solid 1px rgba(0, 0, 0, 0.3); }

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

Answer 2

The commas are interfering with the grid-template-columns , if you do:

 grid-template-columns: 25% 25% 25% 25%;

should fix the mentioned issue

Answer 3

您还可以使用repeat ：

grid-template-columns: repeat(4, 25%);