I have the following JS code to create a grid of squares. It isn’t creating a grid so much as a single column. Using the Chrome developer tools, I drilled down into the DOM to find the parent container to see whether the two attributes (grid-template-rows and grid-template-columns) were being inserted. They are, but, their values are enclosed in quotes leading me to think that they’re actually being ignored by browser. Note that other CSS statements are styling the boxes and setting positions.

function drawGrid(container) {
    const grid = document.createElement('div');
    grid.className = 'grid';
    let value = `repeat(${height}, auto)`;
    grid["grid-template-rows"] = value;
    value = `repeat(${width}, auto)`;
    grid["grid-template-columns"] = 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);
}

If I put those two attributes into css without quotes and using actual integers, the grid is drawn as expected. The problem is that I need the integers to be set based on user inputs, not fixed values, thus, adding them in javascript.

This is what the two attributes look like when displayed in the tools

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

What am I doing wrong?