"grid-template-columns" and "grid-template-rows" style properties not getting set by script

Question

function init() {
        let x = 12;
        let y = 8;
        let content = document.getElementById("content");
        let grid = content.appendChild(document.createElement("div"));
        grid.id = "grid";
        grid.classList.add("grid");
        grid.style.display = "grid";
        grid.style.gridTemplateColumns = `repeat(${x} 4fr 1fr 4fr 1fr 4fr)`;
        grid.style.gridTemplateRows = `repeat(${y} 4fr 1fr 4fr 1fr 4fr)`;

        for (let i = 0; i < x; ++i) {
            for (let j = 0; j < y; ++j) {
                let cell = grid.appendChild(document.createElement("div"));
                cell.classList.add("cell");
                cell.style.gridColumn = `${1 + i * 5} / ${6 + i * 5}`;
                cell.style.gridRow = `${1 + j * 5} / ${6 + j * 5}`;
            }
        }
        
        for (let i = 0; i < (x - 1); ++i) {
            for (let j = 0; j < y; ++j) {
                let cell = grid.appendChild(document.createElement("div"));
                cell.classList.add("h-path");
                cell.style.gridColumn = `${5 + i * 5} / ${7 + i * 5}`;
                cell.style.gridRow = `${3 + j * 5} / ${4 + j * 5}`;
            }
        }

        for (let i = 0; i < x; ++i) {
            for (let j = 0; j < (y - 1); ++j) {
                let cell = grid.appendChild(document.createElement("div"));
                cell.classList.add("v-path");
                cell.style.gridColumn = `${3 + i * 5} / ${4 + i * 5}`;
                cell.style.gridRow = `${5 + j * 5} / ${7 + j * 5}`;
            }
        }
}

document.addEventListener("DOMContentLoaded", init);

.content {
    padding: 0.5rem;
    background-color: grey;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.grid {
    display: grid;
    background-color: white;
    /*grid-template-columns: repeat(12, 4fr 1fr 4fr 1fr 4fr);
    grid-template-rows: repeat(8, 4fr 1fr 4fr 1fr 4fr);*/
    padding: 2px;
    gap: 2px;
    width: 50svw;
}

.grid > div {
    box-sizing: border-box;
    border: 1px solid rgb(24 186 96 / 70%);
    border-radius: 5px;
    background-color: rgb(24 186 96 / 50%);
}

.grid > .cell {
    aspect-ratio: 1;
}

<!DOCTYPE html>
<html>
<body>
  <div class="container">
    <div id="content" class="content">
    </div>
  </div>
</body>
</html>

If I uncomment the "grid-template-columns" and "grid-template-rows" properties in the css it works as expected. Why aren't those properties getting set by the script?

I need to set those properties in the script so I can change the grid size. I threw in the grid.style.display = "grid"; line just to make sure I can set style properties on the grid element in the script, and it works. So why aren't the "grid-template-*" properties getting set?

If it matters, I'm using Firefox, I haven't tried a different browser.

Using your broswer devtools inspect facility would show you that the value for the grid-templates-... you are using is not valid. Look up the correct syntax. MDN is a reliable source. developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/… — A Haworth
– A Haworth, Commented 3 hours ago

oulol · Accepted Answer · 2025-11-29 07:38:29Z

0

The properties are set correctly, but the syntax you provided for repeat() is incorrect. The problem is that you forgot a comma. Here are corrected lines of code:

grid.style.gridTemplateColumns = `repeat(${x}, 4fr 1fr 4fr 1fr 4fr)`;
grid.style.gridTemplateRows = `repeat(${y}, 4fr 1fr 4fr 1fr 4fr)`;

edited 13 hours ago

answered 13 hours ago

Collectives™ on Stack Overflow

"grid-template-columns" and "grid-template-rows" style properties not getting set by script

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related