如何在 CSS 中使用网格区域隐藏具有内容的元素？答案

【问题标题】：How to hide elements that have content using grid areas in CSS?如何在 CSS 中使用网格区域隐藏具有内容的元素？
【发布时间】：2018-06-10 16:37:15
【问题描述】：

我正在 CodePen 中创建一个基本的 Web 布局，以更好地了解网格区域如何与 CSS 网格模块一起使用。事实证明，当应用于grid-template-areas 属性时，使用. 表示法实际上并没有“隐藏”这些项目。

请在此处查看我的代码：https://codepen.io/isaacasante/pen/KZmyKV

您可以看到我将菜单下方的网格单元留空，但我添加了grid-area: random 的section 元素仍显示在我的布局的右下角（在我的页脚下方）。

你们知道如何在不删除 HTML 的情况下摆脱它吗？我只想使用网格区域来隐藏它。我注意到一个简单的解决方案是让我将 section 元素上的填充设置为 0，但这不是一个好的解决方案，因为下次我尝试“隐藏”一个元素时它不会起作用有内容的。

【问题讨论】：

标签： css html css-grid

【解决方案1】：

您可以将网格模板行重置为grid-template-rows: 70px 40px 0px 290px 50px; https://codepen.io/anon/pen/JMNpaJ 并将display:none 设置为section.item。 position:absolute;right:100vwworks 将其放置在屏幕之外。 https://codepen.io/anon/pen/vpmdzj 但那是你知道它是空的或随时被隐藏的时候。

改为您可以使用:empty 和auto。 https://codepen.io/anon/pen/NXjyLV 所以只有在为空时才会隐藏。

很好，grid-gap 仍然可见。它可以在.item 上重置为0 和margin 可能有助于此特定行的:empty 选择器和auto 值： https://codepen.io/anon/pen/NXjyLV

【讨论】：

【解决方案2】：

使用display: none:

section.item {
    display: none;
}

JSFiddle

【讨论】：