我正在 CodePen 中创建一个基本的 Web 布局，以更好地了解网格区域如何与 CSS 网格模块配合使用。事实证明，.当应用于属性时，使用符号实际上并不会“隐藏”项目grid-template-areas。
请在此处查看我的代码： https: //codepen.io/isaacasante/pen/KZmyKV
您可以看到我将菜单下方的网格单元保留为空，但section我添加的元素grid-area: random仍然显示在布局的右下角（页脚下方）。
你们知道如何在不删除 HTML 的情况下摆脱它吗？我只想使用网格区域来隐藏它。我注意到一个简单的解决方案是将元素上的填充设置section为 0，但这不是一个好的解决方案，因为下次我尝试“隐藏”具有内容的元素时它将不起作用。
您可以将grid-templates-rows 重置为grid-template-rows: 70px 40px 0px 290px 50px;
https://codepen.io/anon/pen/JMNpaJ 并设置display:none为section.item. position:absolute;right:100vw可以将其放置在屏幕之外。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