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)"); 
});