JS动态设置Grid属性值带引号致网格布局失效问题排查

问题出在你设置网格属性的方式上：你直接给DOM元素的属性赋值，而非通过style对象设置CSS样式。这种方式会让浏览器把属性值自动用引号包裹，导致CSS解析器无法识别repeat()语法，自然只显示单列。

正确做法 #

要动态设置CSS样式，必须通过元素的style属性操作：

function drawGrid(container) {
    const grid = document.createElement('div');
    grid.className = 'grid';
    let value = `repeat(${height}, auto)`;
    // 用style对象设置CSS属性
    grid.style.gridTemplateRows = value;
    value = `repeat(${width}, auto)`;
    grid.style.gridTemplateColumns = value;

    for (let i = 0; i < state.board_height; i++) {
        for (let j = 0; j < state.board_width; j++) {
            drawBox(grid, i, j);
        }
    }

    container.appendChild(grid);
}

也可以用短横线命名的写法（两种方式等效）：

grid.style["grid-template-rows"] = value;
grid.style["grid-template-columns"] = value;

修改后，Chrome开发者工具里的样式会显示为无引号的正常值：

grid-template-columns: repeat(10, auto)
grid-template-rows: repeat(6, auto)

网格就能正常按行列布局了。

内容的提问来源于stack exchange，提问作者user206545