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显示该值已计算，并且无法更改。

非常感谢任何帮助指引我正确的方向（或其他方法来做到这一点，但必须使用grid）。

谢谢。

- MikeC

Answer 1

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

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

您可以在jQuery的此处的函数文档中阅读更多内容。

此外，为了让您看到它的效果，我制作了一个codeply项目，您可以在其中查看它的效果。如果您单击网格的任何位置，它将调整大小（只会调整一次）。这是一个基本示例。

以下是它使用的jQuery代码。

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

- Jade Cowan

---

谢谢您的回答。这里不允许使用jQ，有没有纯JavaScript的解决方案呢？谢谢！ - MikeC

我可以使用document.getElementsByClassName('wrapper')[0].style.gridTemplateColumns来访问某些内容，但它返回一个空字符串... - MikeC

好的，明白了！看起来我可以直接设置上面的变量，它会立即改变宽度！感谢您的帮助！ - MikeC

看起来这在FireFox中可以工作，但在Chrome中还不行。Chrome 73.0.3683.75 (Official Build) (64-bit) Firefox 65.0 (64-bit)你可以在这里检查：https://codepen.io/bileschi/pen/ZPRPqr - BlessedKey

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';
    }

}

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

- Larry Aultman