@DonTraffic
Начинающий верстальщик

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

<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.
  • Вопрос задан
  • 37 просмотров
Решения вопроса 1
Bully55
@Bully55
Front end developer
Я думаю было бы лаконичнее создать отдельный класс с нужными вам значениями и по клику просто поменять класс элементу при помощи JS :)
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы