CSS 网格如何在无需更改 grid-template-columns 的情况下切换子级可见性

Question

给出以下布局：

 <div id="grid" style="display: grid; grid-template-columns: min-content auto; width: 100px; height: 100px; border: 1px solid #ccc;">
    <div id="first" style="width: 20px; background-color: green;">
      
    </div>
    <div style="background-color: cyan;">
    </div>
  </div>

我想切换“第一个”子级的可见性，以便第二个子级将占据剩余空间。

网格似乎通过将隐藏的列定义重新分配给下一个可见的列定义来做了一件愚蠢的事情，因此在隐藏第一个子级之后，就网格布局看到的情况和它固有的使用而言，第二个子级成为“第一个” “汽车”。由于子 child 中没有内容，因此它不会显示任何内容。我希望网格模板列能够坚持，无论实际的列可见性如何。

如果孩子被物理地从网格中移除，后者将完全有权这样做，但我只是改变可见性。

在我看来，需要管理这种场景的网格模板列会产生完全不必要的开销，如果人们可以分享他们的想法，我将不胜感激。

我知道某些布局（例如使用

repeat(...)

的布局）可能不会遇到此问题，但我正在寻找针对我的场景的修复方法。

Answer 1

您可以将

grid-column: span 2;

赋予一个元素，使其占用自己的空间 + 接收

display: none;

的元素的空间：

.grid {
  display: grid;
  grid-template-columns: min-content auto;
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
}

.one {
  width: 20px;
  background-color: green;
}

.grid:hover .one {
  display: none;
}

.grid:hover .one + .two {
  grid-column: span 2;
}

.two {
  background-color: cyan;
}

<div class="grid">
  <div class="one"></div>
  <div class="two"></div>
</div>