在display:ms网格中动态显示/隐藏列/行

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;