Изменить сетку-шаблон-столбцы при нажатии кнопки - PullRequest
Новая
       7

Изменить сетку-шаблон-столбцы при нажатии кнопки

0 голосов
/ 10 июня 2019

Я пытаюсь изменить grid-template-columns с помощью jQuery, но не могу заставить его работать.Вот мой код: 

$('button').click(function() {
  $('.grid').css('grid-template-columns', 'repeat(2, 1fr)');
});
.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 20px;
  grid-auto-rows: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="grid">
  <div>
    <button>Expand</button>
  </div>
  <div>
    <button>Expand</button>
  </div>
  <div>
    <button>Expand</button>
  </div>
  <div>
    <button>Expand</button>
  </div>

</div>

После нажатия кнопки каждый элемент сетки отображается как 1fr.Как я могу заставить это работать?

...