Как сделать мой номер столбца динамическим c с сеткой отображения css?

Question

В настоящее время я использую css display: grid; и grid-template-columns: auto auto auto auto auto auto auto auto auto auto; для отображения макета, как показано на рисунке. У меня вопрос, как мне сделать мою колонку динамической c. На данный момент я жестко запрограммировал это, поместив 10 auto, что относится к 10 столбцам, но мой столбец таблицы - Dynami c. У некоторых есть 8 столбцов. У меня уже есть номер моего динамического c столбца, вычисленный в моем Javascript / Jquery. У меня нет ничего похожего на sass. Нужно ли это, чтобы сделать это?

Answer 1

1) Изменение количества столбцов на JavaScript

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

2) Изменение количества столбцов в PHP

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

и следующем коде CSS

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