CSS网格被覆盖，我不知道为什么

Question

我正在尝试创建一个4 x 4个正方形（Divs）的4 x 4网格。我已经制作了带有网格显示的容器div。 16个正方形是行的，但是当我尝试制作4列时，它在开发工具的“样式”选项卡中具有罢工。

这是我在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);
}

他们由JS创建了16个孩子。这会影响为什么网格无法正常工作吗？

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

无需在，之间，网格 - 板块列值。
您也可以将其更改为自动，而不是自己进行计算，如果它们都相同并指定25％。
现在看看

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

逗号正在干扰网格 - 板块柱，如果您这样做：

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

应该解决上述问题