'How do I change grid-template-columns style with JS?

this is the class I'm trying to change in my CSS file.

.screen{
margin-top: 0%;
 width: 75%;
 height: 75%;
 background-color: lightgrey;
 display: grid;
 grid-template-columns: repeat(16, 1fr);
 grid-template-rows: repeat(16, 1fr);
}

I assign a size variable and then I assume I can use something like:

document.getElementsByClassName('screen').style = "grid-template-columns: repeat(" + size + ", 1fr)"

but cannot get it to work. :(

javascriptcss


Solution 1:[1]

You Simply do the following :

document.getElementById("yourdivision").style.gridTemplateColumns = "50px 50px 50px";

Or :

document.getElementById("yourdivision").style.gridTemplateColumns = "1fr 1fr 1fr";

Solution 2:[2]

this is because document.getElementsByClassName('screen') returns an array so try using this

document.getElementsByClassName('screen')[0].style

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Hephaestus
Solution 2 Asim Khan

Related Questions