用CSS网格隐藏元素

用CSS网格隐藏元素

本文介绍了用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.

下面是一个代码示例:。我想做的是切换 .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网格隐藏元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-31 02:23