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

Question

我尝试建立一个CSS网格布局如下

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

是否有可能找到网格模板列在JS然后重新大小的列？我遇到了一种我可以找到它的情况（丢失了代码），但是当我尝试改变它时，Chrome DevTools说这个值是计算出来的，不能改变。

任何帮助指向我在正确的方向（或其他方式来做到这一点，但使用电网是必须的），我非常感激。

谢谢。

Answer 1

@MikeC，如果你不反对使用jQuery，您可以使用jQuery的.css()功能，

得到一个计算样式属性的值的第一个元素 的改变列宽匹配元素的集合或为每个匹配元素设置 的一个或多个CSS属性。

您可以阅读jQuery的文档中有更于它的功能here。

此外，只要你能看到它的行动，我放在一起codeply project，你可以看到它的行动。如果你点击网格上的任何地方，它将调整大小（只有一次）。这是一个原始的例子。

下面是它使用的jQuery代码。

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