Как изменить grid с помощью JS?

Question

[DonTraffic]

<button onclick="funPositionGrid("1fr 1fr")">2</button>
<div id="gridContainer>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
</div>

#gridContainer{
   display:grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   height: 500px;
   width: 500px;
}

function funPositionGrid(num) {
   document.getElementsByClassName("gridCatalog")[0].style.gridTemplateColumns = num;
}

Изначально, у грида 4 колонки, при нажатии на кнопку должно передаваться другое значение, в данном случае 2е колонки по 1fr.

Answer 1

[Bully Hopkins]

Я думаю было бы лаконичнее создать отдельный класс с нужными вам значениями и по клику просто поменять класс элементу при помощи JS :)

Comments

[DonTraffic]

выглядит как костыль и не подойдёт для некоторых задач. А так, спасибо!

[Novum]

DonTraffic, ну как, придумали решение? поделитесь?