CSS 网格布局使用 javascript 改变列宽

我尝试设置 CSS 网格布局如下

.wrapper {
  width: 800px;
  display: grid;
  grid-template-columns: repeat(3, 200px);
  grid-template-rows: repeat(5, 200px);
}

是否可以在 JS 中找到 grid-template-columns 然后重新调整列的大小？我遇到过一种情况，我可以找到它（丢失了代码），但当我尝试更改它时，Chrome DevTools 说该值是计算出来的，无法更改。

任何帮助我指明正确方向（或其他方法，但必须使用网格）的帮助都将受到高度赞赏。

Thanks.

@MikeC，如果您不反对使用 jQuery，您可以使用 jQuery 更改列宽.css()函数，其中

获取第一个元素的计算样式属性值 一组匹配的元素或设置一个或多个 CSS 属性 每个匹配的元素。

您可以在 jQuery 的函数文档中阅读更多相关内容here http://api.jquery.com/css/.

另外，为了让您可以看到它的实际效果，我整理了一个代码层项目 https://www.codeply.com/go/eEOH8KBHBo您可以看到它的实际效果。如果您单击网格上的任意位置，它将调整大小（尽管仅一次）。这是一个原始的例子。

这是它使用的 jQuery 代码。

$( "#grid" ).one( "click", function() {
  $( this ).css( "grid-template-columns", "repeat(2, 400px)" );
});