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 的差距也存在。

我认为一个解决方案是创建一个 class，只是为了删除评论区。

.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 继续在两行之间应用。除了现在，随着评论部分的消失，那个网格区域有一个更大的 space。

当您要删除评论部分时，为什么不删除整个第二行而不是删除那个网格项？ grip-gap 仅适用于在个网格项之间。

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

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

CSS grid, remove gap when area is optional

html

css

grid-layout

css-grid