使用CSS Grid隐藏元素

Question

使用CSS Grid layout如何安全隐藏没有grid-template-rows布局属性的行传递到下一行？我尝试了display: none;，但隐藏元素的布局被传递给下一个元素。

以下是一个代码示例：http://plnkr.co/edit/E3kuJcDxKnrjjbdVHQbO?p=preview。我要做的是切换.item2元素的可见性，而不影响页面上的任何其他元素。谢谢！

Answer 1

由于您未在示例中使用grid-gap，因此您可以这样做：

.grid {
    grid-template-rows: 55px 0px;
}
.item2 {
    visibility: hidden;
}

为了达到相同的结果但有差距，您需要避免使用非常方便的grid-gap声明，因为它会导致.item2在留出额外的间隙空间时崩溃了。一些margin操作应该会给你相同的结果。

• Example - no gap
• Example - with gap

Answer 2

设置每个单独项目的行高，而不是grid-template-rows。然后“显示：无”将起作用。