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

Question

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

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

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

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

谢谢。

Answer 1

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

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

您可以在 jQuery 函数文档中阅读更多相关内容。

另外，为了让您可以看到它的实际效果，我整理了一个codeply 项目，您可以在其中看到它的实际效果。如果您单击网格上的任意位置，它将调整大小（尽管仅一次）。这是一个原始的例子。

这是它使用的 jQuery 代码。

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