Conceal CSS Grid ingredient if empty

I am making an attempt to cover the Grid ingredient whether it is empty with the :empty pseudo-class.

CSS

.o-grid {
    show: grid;
}

.o-grid--half {
    width: 50%;
    grid-template-columns: repeat(1,minmax(0,1fr));
}

.o-grid:empty { show: none; }

Regular ingredient with content material.

<div class="o-grid o-grid--half">
    <div>Content material</div>
    <div>Some Content material</div>
</div>

However, if the ingredient has no content material, the Grid ingredient area is preserved, and the browser will hold an area for it, and I wish to disable this.

<div class="o-grid o-grid--half">

</div>