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

I'm starting using CSS grid (pretty amazing!). I'm starting with the most basic layout: mobile layout. Also, I'm using media queries to change the layout as the web page grows.

我开始使用CSS网格(非常棒!)。我从最基本的布局开始:移动布局。此外,我正在使用媒体查询来随着网页的增长更改布局。

For now, my layout consists of 3 areas. The exact order is the content area, the sidebar area and the commenting area. The commenting area is optional and may not display at all. There is a gap of 40px between areas.

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

This is the mobile layout css

这是移动布局css

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

If the commenting area doesn't exist, the gap for the commenting area also does not exist, which it's what i want.

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

https://jsfiddle.net/p54od8ho/

When the page grows, i'm changing the layout, like this:

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

@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/

The gap of 40px exists because the comment area exists.

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

But, this is what happens when the comment area does not exist:

但是,当注释区域不存在时会发生这种情况:

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

If you notice, even if the comment area doesn't exist, the 40px gap exists.

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

I believe one solution is to create a class, just to remove the comment area.

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

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

There has to be a better and more simple way (or maybe not).. Is there a way, using only the grid options, to make it so when the comment area does not exist, the gap is also gone ?

必须有一种更好,更简单的方式(或者可能不是)..是否有一种方法,只使用网格选项,以便当评论区域不存在时,差距也消失了?

1 个解决方案

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

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