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的here函数文档中阅读更多内容。

另外，为了让你能够看到它的实际效果，我整理了一个codeply project，你可以看到它在行动。如果单击网格上的任何位置，它将调整大小（仅一次）。这是一个原始的例子。

这是它使用的jQuery代码。

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

Answer 2

@MikeC你没有告诉任何人你是如何让它工作的。假设您有一个按钮或某个事件调用toolExpandToggle（）并假设您的网格CSS定义的类名称为“canvas”，那么您可以执行类似这样的操作。在我有CSS：

@media only screen and (min-width: 768px)   {
.canvas {
    grid-gap: .0em;
    grid-template-columns: 50px auto;      /* the values are the toolbar, content */
    grid-template-rows: 50px auto 25px;     /* The values are o365Nav (O365 stardard), content, statusbar. Note: o365Nav heigth is the padding value used by the modal menu. */
    grid-template-areas:
    "o365Nav  o365Nav"
    "tool content"
    "statusbar  statusbar";
}

}

在HTML中我有一个按钮。请注意，我将宽度定义为数据项，其中50与CSS匹配。无论如何，这些值在使用时将替换CSS。

    <div class="tool" id="pl-tool" data-collasped="50"; data-expanded="200";>
    <div class="spacer"></div>
    <button class="tool-ms-button"><span class="ms-Icon ms-Icon--GlobalNavButton tool-ms-icon" aria-hidden="true" onclick="toolExpandToggle('pl-tool')"></span></button>
    <!-- now the tool bar buttons -->
    <div><button class="tool-button">item-a</button></div>
    <div><button class="tool-button">item-a</button></div>
</div>

然后我有一个javascript函数：

function toolExpandToggle(target) {
    let id = document.getElementById(target);
    let c = id.dataset.collasped;
    let e = id.dataset.expanded;

    let w = document.getElementsByClassName('tool')[0].offsetWidth;
    if(w < e) {
       document.getElementsByClassName('canvas')[0].style.gridTemplateColumns = e + 'px auto';
    }
    else {
        document.getElementsByClassName('canvas')[0].style.gridTemplateColumns = c + 'px auto';
    }

}

在我的情况下，我只有两列。当我单击一个按钮时，我调用切换方法并将其更改为数据值。我希望这会让其他人在赛道上走得更远。