隐藏CSS网格中的左列 [英] Hiding a left column in CSS Grid

问题描述

我有许多 div 个元素：

<main>
    <div id="top">Top</div>
    <div id="left">Left</div>
    <div id="right">Right</div>
</main>

我想在网格中显示：

┌─────────────────┐
│ Top             │
╞══════╤══════════╡
│ Left │ Right    │
└──────┴──────────┘

我希望能够隐藏一个元素，并让另一个填充其空间。

I would like to be able to hide one element and have the other fill its space.

┌─────────────────┐
│ Top             │
╞═════════════════╡
│ Right           │
└─────────────────┘

列的间距不是均匀的。我对 main 和 div＃top 元素使用了以下CSS：

The columns are not evenly spaced. I have used the following CSS for the main and div#top elements:

main {
    display: grid;
    grid-template-rows: 3em 1fr;
    grid-template-columns: 120px 1fr;
    border: medium solid #333;
}
div#top {
    grid-column: 1/3;
}

问题是当我隐藏第一个 div时使用 display：none ，第二个仅占据第一个的原始空间。

The problem is that when I hide the first div using display: none, the second one only occupies the original space of the first one.

我如何说服第二个div占据整个行？

How can I convince the second div to take up the whole row?

下面的代码段说明了这一点。

The snippet below illustrates the point.

注意事项：在其他部分不可用时，使div填充整个CSS网格的行提出类似的要求，但是在我的情况下解决方案不起作用。这是因为我的Left div具有固定的宽度。

Note: The question at Make div fill up entire CSS grid's row when the other part is not available asks something similar, but solution doesn’t work in my case. This is because my Left div has a set width.

var left = document.querySelector('div#left');
var right = document.querySelector('div#right');

right.addEventListener('click', function(e) {
  left.style.display = left.style.display == 'none' ? 'block' : 'none';
});

main {
  display: grid;
  grid-template-rows: 3em 1fr;
  grid-template-columns: 120px 1fr;
  border: medium solid #333;
}

div#top, div#left, div#right {
  border: medium solid #999;
  background-color: #f8f8f8;
  margin: 4px;
  font-family: sans-serif;
  padding: .5em;
}
div#top {
  grid-column: 1/3;
}
div#left {

}
div#right {
  
}

<main>
  <div id="top">Top</div>
  <div id="left">Left</div>
  <div id="right">Right: Click to Toggle Left</div>
</main>

推荐答案

使用display：flex

Use display:flex

var right = document.querySelector('div#right');

right.addEventListener('click', function(e) {
   var left = document.querySelector('div#left');
   var shown= !(left.style.display == 'none') ;
   if ( !shown ) {
     left.style.display = 'block';
   } else {
     left.style.display = 'none';
   }
});

main {
  grid-template-rows: 3em 1fr;
  grid-template-columns: 120px 1fr;
  border: medium solid #666;
}

div#top, div#left, div#right {
  border: medium solid transparent;
  box-shadow: inset 0px 0px 0px 4px #AAA;
  background-color: #f8f8f8;
  font-family: sans-serif;
  padding: 1em;
}
div#top {
  grid-column: 1/3;
}
div#left {
  width: 33%;
  float: left;
}
div#right {
  display: flex;
}

<main>
  <div id="top">Top</div>
  <div id="left">Left</div>
  <div id="right">Right: Click to Toggle Left</div>
</main>

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