CSS 网格，当区域可选时去除间隙

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" */
            ;
  }