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);
CodePudding user response:
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>
CodePudding user response:
The commas are interfering with the grid-template-columns
, if you do:
grid-template-columns: 25% 25% 25% 25%;
should fix the mentioned issue
CodePudding user response:
You can also use repeat
:
grid-template-columns: repeat(4, 25%);