使用CSS Grid隐藏元素

Question

使用CSS Grid隐藏元素

csscss-grid

3

使用 CSS Grid layout，我该如何安全地隐藏一行而不会将 grid-template-rows 布局属性传递到下一行？我尝试过 display: none;，但是隐藏元素的布局会传递到下一个元素。

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

- shmuli

请发表你已经尝试过的代码。 - Saurav Rastogi

1

你尝试过使用 visibility: hidden 吗？ - Saurav Rastogi

我不想抄袭@SauravRastogi的答案，但他是正确的。 - Niles Tanner

1

很确定你做不到。你正在CSS中设置第二个“行”的高度。无论是否有元素存在，都不是很相关，无论是隐藏还是不隐藏。 - Paulie_D

1

我很惊讶这不是一个更受欢迎的问题。在我找到更好的方法之前，我会选择使用visibility: hidden。 - MSC

显示剩余3条评论

2个回答

-1

为每个单独的项目设置行高，而不是使用grid-template-rows。然后 'display: none' 将会起作用。

- Johny

这并不会阻止布局属性被传递到网格中下一个可用的单元格。 - MLK.DEV

1

你怎么做到的？ - Michael

如果可能的话，这将是答案，但是无法设置“行高”。 - Joshua Robison

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Justin Parks · Accepted Answer

您可以通过在grid-template-rows声明中将该行的高度设置为0，然后将您想要隐藏的元素的visibility设置为hidden来实现此目的。

假设您想要隐藏第二行：

.grid-hiderows {
    grid-template-rows: auto 0px;
}
.grid-hiderows .item:nth-child(2) {
    visibility: hidden;
}

同样地，要隐藏第三行：

.grid-hiderows {
    grid-template-rows: auto auto 0px;
}
.grid-hiderows .item:nth-child(3) {
    visibility: hidden;
}

如果您需要网格在列/行之间使用间隙，当使用这种方法时，您将无法使用gap属性。相反，您需要使用一些负的margin操作来处理额外的间隙空间。

<div class="grid">
  <div class="item item-fullwidth">1</div>
  <div class="item item-fullwidth" data-hideme>
      <img src="https://via.placeholder.com/600x150/5eba7d/FFFFFF?text=Row+2" style="width: 100%;height: auto;display:block;"></div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>
<button data-toggle style="margin-top:1em">Toggle hidden row</button>
<style>
:root {
  --gap: .5em;
  --rowHeight: auto;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-rows: var(--rowHeight); /* Or use grid-template-rows if row heights will need to be varied / manually set */
}
.item {
  box-shadow: inset 0 0 0 1px lightgray;
  padding: .5em;
}
.item-fullwidth {
  grid-column: span 4;
}
[data-hideme] {
  padding: 0;
}

/**
  *
  * Define toggled state
  * @ change the appropriate row's height on the parent grid to 0 via `grid-template-rows`
  * @ change the element to hide's visibility to 'hidden'
  *
**/
.grid-hiderows {
  grid-template-rows: var(--rowHeight) 0;
}
.grid-hiderows [data-hideme] {
  visibility: hidden;
}

/**
  *
  * Allow for gaps between rows / columns
  *
**/
.grid {
  margin-left: calc(var(--gap)/-2);
  margin-right: calc(var(--gap)/-2);
}
.item {
  margin-right: calc(var(--gap)/2);
  margin-left: calc(var(--gap)/2);
}
.item + .item {
  margin-top: var(--gap);  
}
</style>
<script>
document.querySelector('[data-toggle]').onclick = function() {
  document.querySelector('.grid').classList.toggle("grid-hiderows");
};
</script>