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