用CSS网格隐藏元素 [英] Hiding an element with CSS Grid

问题描述

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

Using CSS Grid layout how can I safely hide a row without grid-template-rows layout properties getting passed over to the next row? I tried display: none; but the layout of the hidden element is passed over to the next element.

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

Here's a code example: http://plnkr.co/edit/E3kuJcDxKnrjjbdVHQbO?p=preview. What I'm trying to do is toggle the visibility of the .item2 element without effecting any other elements on the page. Thanks!

推荐答案

由于您没有在 grid-gap 中使用在您的示例中，您可以这样实现：

Since you're not using grid-gap in your example, you can achieve this like so:

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

要获得相同的结果，但有差距，但是，您需要避免使用非常方便的 grid-gap 声明，因为这会导致 .item2 在出现以下情况时会留出额外的空隙崩溃了。某些 margin 操作应该会给您相同的结果。

To achieve the same results but with a gap, however, you'd need to avoid using the very handy grid-gap declaration, as it will cause .item2 to leave an extra gap space when collapsed. Some margin manipulation should give you the same results though.

• 示例-没有差距


• 示例-带有间隙

• Example - no gap
• Example - with gap

这篇关于用CSS网格隐藏元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！