影响显示的 div 的网格行间隙：无

Question

我目前正在使用 CSS 网格，并且我正在grid-row-gap很多column-row-gap地方使用。我的问题是，在进行媒体查询时，某些元素/div 不会以较小的分辨率显示，我通常只是将它们设置为display: none. 但是，如果我没有记错的话，即使可以看到该元素，行或列间隙功能仍然适用于“隐藏”元素。

有什么办法可以解决这个问题，还是我在这里做错了什么？

编辑：

好吧，看起来display: none不会影响网格行间隙 - 这是有道理的。但我找到了一个小解决方法，即在分辨率发生变化时删除网格间隙并添加填充。这似乎奏效了。

感谢所有的答案。

Answer 1

有没有什么办法解决这一问题 [...]？

当应用于 CSS 网格中的子元素时，一个简单的修复方法display: none;是记住相应地更改父网格，以考虑到这些子元素不再显示的事实。

工作示例：

body > div {
display: inline-grid;
grid-template-rows: auto auto auto;
grid-template-columns: auto auto auto;
grid-row-gap: 6px;
grid-column-gap: 12px;
width: 120px;
height: 120px;
margin-right: 24px;
border: 1px solid rgb(255, 0, 0);
}

div div {
border: 1px solid rgb(255, 0, 0);
}

body > div:hover div:nth-of-type(n+7) {
display: none;
}

body > div:nth-of-type(2):hover {
grid-template-rows: auto auto;
height: 80px;
}

<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

在上面的两个 CSS 网格中，最后三个子元素都从显示中删除:hover。但在第二个网格中（仅），父元素的高度和数量grid-template-rows也减少了，从而避免显示未显示的子元素曾经占据的间隙。