我正在CodePen中创建一个基本的Web布局,以便更好地理解网格区域如何与CSS Grid模块一起工作。事实证明,当应用于.
属性时,使用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
works把它放在屏幕外面。 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