如何使用 css 显示网格使我的列号动态化？

Question

I am currently using css display: grid; and grid-template-columns: auto auto auto auto auto auto auto auto auto auto; to display the layout as shown in the image. My question is how to I make my column dynamic. At the moment, I hard-coded it by putting 10 auto which is referring to 10 columns but my table column is dynamic. Some have 8 columns. I already have my dynamic column number calculated in my Javascript / Jquery. I don't have anything like sass. Do I need it to get this done?

Answer 1

1) Changing the number of columns by JavaScript

const cols = 10;
object.style.gridTemplateColumns=`repeat(${cols},auto)`;

2) Changing the number of columns in PHP

<?php $cols = 10; ?>
...
<div class="grid" style="--cols: <?php echo $cols; ?>;">...</div>

and the following CSS code

.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
}