空元素

Question

我用CSS网格模板的地区，像这样：

grid-template-areas: 
    'sidebar tags' 
    'sidebar categories'; 

它工作正常，但我想补充一个空的元素，有点像这样：

grid-template-areas: 
    'EMPTY sidebar tags  EMPTY' 
    'EMPTY sidebar categories EMPTY'; 

这可能吗？我知道我可以为它添加一个空的html元素，但是我知道在大多数情况下，css网格对于仅用css来控制事物是非常聪明的。

Answer 1

CSS网格规范包括使用网格列间距和网格行间距属性添加列和行轨道之间的排水沟的能力。这些指定的间隙与多列布局中的列间隙属性非常相似。

间隙仅出现在网格的轨道之间，它们不会在容器的顶部和底部，左侧或右侧添加空间。因此，您只能使用这些属性在现有模板区域之间创建空隙。

例如

grid-column-gap: 40px; 
grid-row-gap: 2em;