Question

我开始使用CSS网格（太棒了！）。我从最基本的布局开始：移动布局。此外，我在网页增长时使用媒体查询来更改布局。

目前，我的布局包含3个区域。确切的顺序是内容区域，侧边栏区域和评论区域。 评论区域是可选的，可能根本不显示。区域之间存在 40px 的差距。

这是移动布局css

.grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  grid-gap: 40px;
}

如果评论区域不存在，评论区域的差距也不存在，这就是我想要的。

https://jsfiddle.net/p54od8ho/

当页面增长时，我正在改变布局，如下所示：

@media screen and (min-width: 768px) {
  .content {
    grid-area: content;
  }
  .sidebar {
    grid-area: sidebar;
  }
  .comments {
    grid-area: comment;
  }
  .grid {
        grid-template-columns: 1fr 300px;
        grid-template-rows: auto;
        grid-template-areas:
            "content sidebar"
            "comment sidebar";
  }
}

https://jsfiddle.net/g20gtd4z/

存在40px的差距，因为评论区域存在。

但是，当评论区域不存在时会发生这种情况：

https://jsfiddle.net/6Lfg55my/1/

如果您注意到，即使评论区域不存在，也存在40px的差距。

我相信一个解决方案是创建一个类，只是为了删除注释区域。

.grid.no_comment {
            grid-template-areas:
                "content sidebar"
                ". sidebar";
      }

必须有更好更简单的方法（或许不是）.. 是否有一种方法，只使用网格选项，以便当评论区域不存在时，差距也消失了？

Answer 1

当评论区域存在时，容器中有两列和两行：

.grid {
        grid-template-columns: 1fr 300px;
        grid-template-rows: auto;
        grid-gap: 40px;
        grid-template-areas:
            "content sidebar"
            "comment sidebar";
  }

因此，当然，grid-gap适用于第一行和第二行（和列）。

删除评论区域后，容器中仍有两列和两行。删除该项目不会更改grid-template-areas的值。

因此，自然地，grid-gap继续在两行之间应用。除了现在，随着评论部分的消失，该网格区域的空间更大。

如果要删除评论部分，而不是删除该网格项，为什么不删除整个第二行？ grip-gap仅在网格项之间工作。

.grid { grid-template-columns: 1fr 300px; grid-template-rows: auto; grid-gap: 40px; grid-template-areas: "content sidebar" /* "comment sidebar" */ ; }

CSS网格，当区域是可选的时删除间隙

1 个答案: