CODEWITHSUNDEEP
javascriptcsscss-grid
bmcginnis007
bmcginnis007

Reputation: 23

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

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);

Upvotes: 2

Views: 314

Answers (2)

samuel silva
samuel silva

Reputation: 432

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

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

should fix the mentioned issue

Upvotes: 0

Ran Turner
Ran Turner

Reputation: 18116

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>

Upvotes: 1

Related Questions