动态显示/隐藏显示中的列/行：-ms-grid

Question

我有一个使用display: -ms-grid 的类，为了论证，假设它的定义如下：

.gridDiv {

    display: -ms-grid;
    -ms-grid-rows: 1fr;
    -ms-grid-columns: 200px 400px 200px;

}

有没有办法在运行时通过 css 或 js 隐藏我的一个列？我已经隐藏了其中的元素，但我想粉碎 .gridDiv，使其看起来只有两列。

任何想法表示赞赏。

Answer 1

这可以在您的 .js 文件中完成。如果需要，需要确保元素在此之后再次布局。

var gridDiv = this.element.querySelector('.gridDiv');
var columns = '200px 200px';
// TODO -  code to compute columns
gridDiv.style.msGridColumns = columns;