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);
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>The commas are interfering with the grid-template-columns, if you do:
grid-template-columns: 25% 25% 25% 25%;
should fix the mentioned issue