如何使用CSS中的网格区域隐藏包含内容的元素？

Question

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

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

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

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

Answer 1

您可以将grid-templates-rows重置为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仍然可见。它可以重置为0和margin上的.item可能有助于沿着:empty选择器和auto这个特定行的值：https://codepen.io/anon/pen/NXjyLV

Answer 2

使用display: none：

section.item {
    display: none;
}

JSFiddle