如何删除高度为 CSS 的网格的间隙：0 元素

Question

我最近开始使用 CSS 网格。我需要将一个空的 div 元素设置为网格元素之一，以便我可以在需要时按 javascript 插入内容。问题是 gap 被应用到这个空的元素并且 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 设置特定的间隙，因为它是其父项的属性。

我的建议是用 display:none 属性设置空 div。一旦你用 javascript 向它注入内容，将它的显示设置为“块”、“弹性”或它在可见时使用的任何显示属性。

另一种解决方案是用子项上的边距或填充底部替换“间隙”。由于这是一个属性个子组件，您将能够在 div 中创建相同的异常。

如何删除高度为 CSS 的网格的间隙：0 元素

How to remove gap for CSS Grid with height: 0 element

html

css

css-grid