在CSS网格中隐藏左列

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;
}

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

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

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

注： Make div fill up entire CSS grid's row when the other part is not available处的问题类似，但对我而言解决方案不起作用。这是因为我的Left 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: 0 0 100%;
}

div#left {
  flex: 0 0 120px;
}

div#right {
  flex: 1;
}

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>