grid-row-gap 影响带有显示的 div：无答案

【问题标题】：grid-row-gap affecting divs with display: nonegrid-row-gap 影响带有显示的 div：无
【发布时间】：2018-05-14 00:29:08
【问题描述】：

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

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

编辑：

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

感谢大家的回答。

【问题讨论】：

向我们展示代码
这是标准行为，网格行/列不是元素，并且将存在 其中是否有内容。根据您的代码，您可能需要重新考虑布局，如果您在 Stack Snippet 中创建演示，我们可能会提供帮助。
您不会使用display: none 删除网格轨道。那只是删除该项目。由于轨道仍然存在，因此网格间隙也仍然存在。 stackoverflow.com/a/50218855/3597276
我很伤心这不起作用:-(
NVM 确实适用于 grid-auto-columns

标签： css css-grid

【解决方案1】：

有没有办法解决这个问题[...]？

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

【讨论】：

【解决方案2】：

如果您使用grid-auto-columns（或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>

【讨论】：