Can I make a CSS grid with dynamic number of rows or columns?

Question

What I wanna do is to make a CSS grid with a dynamic number of cells. For the sake of simplicity, let\'s assume there will always be four cells per row. Can I specify a grid

Answer 1

You don't need to use repeat. Instead you can just use set a variable --grid-template-columns from your javascript code.

rootEl.style.setProperty('--grid-template-columns' theGridTemplateColumnsValue)

theGridTemplateColumnsValue is a string that can also contains other css variables. This way you can have a dynamic number of columns per row.