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

Question

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

17

我开始使用CSS网格布局（非常惊人！）。我从最基本的布局开始：移动布局。此外，我使用媒体查询来随着网页的增长而改变布局。

目前，我的布局由3个区域组成。确切的顺序是内容区域、侧边栏区域和评论区域。评论区域是可选的，可能根本不显示。区域之间有40像素的间隙。

这是移动布局的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/

由于存在评论区域，因此存在40像素的间隙。

但是，当评论区域不存在时，情况会发生以下变化：

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

如果您注意到，即使评论区不存在，40像素的间隙仍然存在。

我相信一个解决方案是创建一个类，只需删除评论区。

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

一定有更好、更简单的方法（或者也许没有）... 使用网格选项，是否有一种方法可以使当评论区不存在时，间隙也消失？

- Marco

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Benjamin · Accepted Answer

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

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