如何消除高度为0的CSS网格的间隙

Question

我最近开始使用 CSS 网格。 我需要设置一个空的

div

元素作为网格元素之一，以便我可以在需要时通过 javascript 插入内容。 问题在于，间隙应用于这个空且

height: 0

的元素。如何避免仅当 CSS 网格元素为空时才应用间隙。

<div class="container"> <!-- gap: 20px; -->
    <div class="grid-element--1">
        <h2>title</h2>
        <p>Text Text Text Text Text Text Text Text Text Text </p>
    </div>
    <div class="grid-element--2">
        <h2>title</h2>
        <p>Text Text Text Text Text Text Text Text Text Text </p>
    </div>
    
    <div class="grid-element--3"></div> <!-- Need to appliy gap: 20px only when this element is not empty -->
    
    <div class="grid-element--4">
        <h2>title</h2>
        <p>Text Text Text Text Text Text Text Text Text Text </p>
    </div>
</div>

Answer 1

间隙属性应用于容器。您不能为子 div 设置特定的间隙，因为它是其父级的属性。

我的建议是设置你的空 div，并使用 display:none 属性。一旦您使用 JavaScript 向其注入内容，请将其显示设置为“block”、“flex”或可见时使用的任何显示属性。

另一种解决方案是用子项的边距或填充底部替换“间隙”。由于这是子组件的属性，因此您将能够进行个别例外。

Answer 2

虽然这个问题已经得到解答，但当网站流程中存在我们不希望它影响某些元素的情况或时刻时，我想发布一种不同的方式来应对网格/弹性间隙。

您可以向受影响的元素添加 CSS 类，并使用

:empty

使其仅在它们为空（无文本、无空格）时才起作用。向该类添加一个

margin-top

，其中间隙为负值。

因此，例如如果间隙为 20px：

--gap: 20px;

.empty-element:empty {
  margin-top: calc(var(--gap) * -1); // -20px
}

具有该类的空 HTML 元素将被上推与间隙相同数量的像素，使其看起来像间隙道具没有视觉效果。

希望对你有帮助！