javascript - 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() 函数更改列宽，该函数

Get the value of a computed style property for the first element in the set of matched elements or set one or more CSS properties for every matched element.

您可以在 jQuery 的函数文档中阅读更多信息 here .

此外，为了让您看到它的实际效果，我整理了一个 codeply project你可以看到它的实际效果。如果您单击网格上的任意位置，它将调整大小(虽然只有一次)。这是一个原始的例子。

这是它使用的 jQuery 代码。

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