css grid-template-areas中的空元素[重复]

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 网格规范包括使用 grid-column-gap 和 grid-row-gap 属性在列和行轨道之间添加装订线的功能。这些指定了一个间隙，其作用类似于多列布局中的 column-gap 属性。

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

例如

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