Etch A Sketch Project - problem in displaying grid through DOM

I am trying to display a grid through DOM. If I hardcode the variable it works fine. But if I use a variable name it is only displaying rows correctly and only one column displaying. Not sure why.

container.style.display = 'grid';

// Works fine
container.style.gridTemplateColumns = 'repeat(6, 30px)';

// Not working.. It is only displaying rows.(here gridValue is user defined)
container.style.gridTemplateColumns = repeat("${gridValue}", 30px);

Please help …

Thank you.

Hi, im not 100% if you have a variable gridValue but using β€œ${gridValue}” doesnt replace the value in the string, is the same as β€œ$”+"{"+β€œgrid”+β€œValue”+"}"

If you want to replace the value in the string use

   `${gridValue}`

It also works for

        'repeat(6, 30px)' == `repeat(${6}, ${30}px)`

but note that the quotation marks are diferent. I think are called backticks.

I got it. I just removed the double quotes around ${gridValue} and it is working. Thank you.

I did

// working now
container.style.gridTemplateColumns = `repeat(${gridValue}, 30px)`;
1 Like