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

Question

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

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

编辑：

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

谢谢大家的回答。

Answer 1

Is there any way to fix this [...]?

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

工作示例：

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 的数量也减少了，从而避免了显示未显示的子元素曾经占据的间隙。

Answer 2

如果使用 grid-auto-columns (or grid-auto-rows) 则可以执行此操作，因为列定义是动态的，因此如果项目被隐藏，则不存在列。

在此示例中，我使用的是 grid-auto-flow: column，它与此示例中的 flex-direction: row 有点相似。如果它们是列与行，则更容易可视化正在发生的事情。

注意：IE 支持 grid-auto-flow，但支持 *-auto-columns。

重要提示：不要将此与 grid-template-columns: auto 混淆！

.outer-container
{
    background: yellow;
    outline: 1px solid black;
}

.container
{
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    grid-gap: 10px;
}

.item
{
    background: steelblue;
    padding: .5em 1em;
    color: white;
}

.item.hidden
{
    display: none;
}

<div class="outer-container">
  <div class="container">
     <div class="item">Item 1</div>
     <div class="item">Item 2</div>
     <div class="item hidden">Item 3 (hidden)</div>
   </div>
 </div>

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

grid-row-gap affecting divs with display: none

css

css-grid