Свойства стиля «grid-template-columns» и «grid-template-rows» не устанавливаются скриптом ⇐ Javascript

[Anonymous]

Код: Выделить всё

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

Код: Выделить всё

Если я раскомментирую свойства «grid-template-columns» и «grid-template-rows» в CSS, все будет работать так, как ожидалось. Почему эти свойства не устанавливаются сценарием?
Мне нужно установить эти свойства в скрипте, чтобы я мог изменить размер сетки. Я добавил строкуgrid.style.display = "grid"; просто для того, чтобы убедиться, что я могу установить свойства стиля для элемента сетки в скрипте, и это работает. Так почему же не устанавливаются свойства "grid-template-*"?
Если это имеет значение, я использую Firefox, я не пробовал другой браузер.




Подробнее здесь: https://stackoverflow.com/questions/798 ... getting-se