在display：-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;