html - 如何使 CSS 网格单元格在为空或使用显示 :none? 时折叠

Question

长话短说:Codepen https://codepen.io/veleek/pen/YmJGjY显示带有 display: none 的网格单元格似乎导致相邻单元格占用更少的空间，而不是崩溃为空。

我正在创建一个简单的 CSS 网格布局，顶部有一个横幅，下面有一个 Logo 、标题、链接栏和一个内容 block 。

对于没有导航链接的页面，我想折叠导航部分，以便标题占据整个空间。实际上，我希望该网格单元格的高度为 0px。

不幸的是，当我在该单元格上设置 display: none 时，它消失了，但似乎占用了更多空间。这实际上会导致标题在该单元格存在时自行折叠，变得更小。

图像大小不固定为 150 像素，我希望尽可能避免使用固定大小。我只想强制该网格行在它为空时具有 0 高度。我已经尝试了一堆 display:block/flex、align-items/justify-content/etc.: stretch/center/etc. 的组合，但似乎没有工作。

我有一个 CodePen 在这里显示问题:https://codepen.io/veleek/pen/YmJGjY

Answer 1

问题与auto的定义有关对于网格行。根据 grid-row-template MDN docs auto是:

Is a keyword that is identical to maximal content if it's a maximum. As a minimum it represents the largest minimum size (as specified by min-width/min-height) of the grid items occupying the grid track.

因此，当轨道中有内容时，它会作为最大值并正确调整大小。但是当clue-nav里面没有内容的时候元素，它似乎回退到最小定义，并且由于唯一占据轨道的网格元素是 clue-logo 中的图像。所以最小值最终被设置为一个更大的值。随着一切自行解决，“空”网格单元格获得更多空间，clue-title网格单元最终占用了它所需的实际“最小”空间量。

要解决此问题，请不要将高度设置为 auto , 你可以使用 minmax(0, auto) .这允许行的实际最小高度变为零而不是 clue-logo高度，当 clue-nav 时它会正确折叠是隐藏的。

我在摆弄 Sølve 的建议答案时偶然发现了这一点，我注意到关于如何决定调整行大小的一些更奇怪的行为。非常感谢他帮助我找到了正确的答案。