在 CSS Grid 中隐藏左列

Question

我有许多div 元素：

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

我想在网格中显示：

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

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

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

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

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

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

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

下面的 sn-p 说明了这一点。

注意：Make div fill up entire CSS grid's row when the other part is not available 的问题提出了类似的问题，但解决方案不适用于我的情况。这是因为我的左 div 有一个固定的宽度。

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>

Answer 1

JS 只是为了演示？单击时，左侧元素设置为display: none，为什么不将右侧元素也设置为grid-column: 1 / 3？

如果这不是一个选项，那么试试 flexbox，它可以干净轻松地处理这种情况。

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: flex;
  flex-wrap: wrap;
  border: medium solid #333;
}

div#top {
  flex: 1 0 90%; /* to allow space for margins; see note below */
}

div#left {
  flex: 0 0 120px; /* flex-grow, flex-shrink, flex-basis */
}

div#right {
  flex: 1; /* fg:1, fs:1, fb:0 */
}

main > div {
  border: medium solid #999;
  background-color: #f8f8f8;
  margin: 4px;
  font-family: sans-serif;
  padding: .5em;
}

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

更多信息

这里是flex: 1 0 90%的解释：

• Flexbox: 4 items per row（具体看我回答的底部）

以下是您在使用 Grid 时遇到的问题的解释：

• Aligning grid items across the entire row/column (like flex items can)

Answer 2

使用 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>