css网格模板区域中的空元素

Question

我使用css grid-template-areas，如下所示：

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

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

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

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

Answer 1

CSS网格规范包括使用网格列间隙和网格行间隙属性在列和行轨道之间添加装订线的功能。这些指定的间隙与多列布局中的列间隙属性非常相似。

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

e.g。

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