How do I make a section and its space disappear when it doesn't have any content with a CSS Grid layout?

Answer 1

Hello,

You can use the :empty pseudo class.

Note that this isn't strictly related to using CSS Grid for your layout. It's only targeting and empty element within your markup (HTML).

For example, say you have this HTML:

<section class="description-container">

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veritatis, quo!</p>

</section>

Then when there is no content in .description-container, like this...:

<section class="description-container"></section>

You can then target .description-container, like so with the :empty pseudo-class:

.description-container:empty {

display: none;

}

More info on the :empty CSS pseudo-class on MDN.

Hope this helps.

Regards.