单击按钮更改网格模板列

Question

我正在尝试使用jQuery更改grid-template-columns，但无法使其正常工作。这是我的代码：

$('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。我该如何工作？