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

Question

我正在 CodePen 中创建一个基本的 Web 布局，以更好地理解网格区域如何与 CSS 网格模块一起工作。事实证明，当应用于 grid-template-areas 属性.

时，使用 . 表示法实际上并不 "hide" 项目

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

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

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

Answer 1

使用display: none:

section.item {
    display: none;
}

JSFiddle

Answer 2

您可以将网格模板行重置为grid-template-rows: 70px 40px 0px 290px 50px; https://codepen.io/anon/pen/JMNpaJ and set display:none to section.item. position:absolute;right:100vwworks to to lay it out of screen. https://codepen.io/anon/pen/vpmdzj 但那是当 你知道它是空的或随时被隐藏的时候。

相反， 您可以使用 :empty 和 auto。 https://codepen.io/anon/pen/NXjyLV 所以它只有在空的时候才隐藏。

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

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

How to hide elements that have content using grid areas in CSS?

css

html

css-grid