CSS grid, remove gap when area is optional

Question

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.

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.

This is the mobile layout 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.

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.

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 ?

score 2 · Accepted Answer · answered Sep 07 '17 at 20:30

When the comment area exists, you have two columns and two rows in the container:

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

So, naturally, grid-gap applies between the first and second row (and column).

When the comment area is removed, there are still two columns and two rows in the container. Removing that item doesn't change the value of grid-template-areas.

So, naturally, grid-gap continues to apply between the two rows. Except now, with the comment section gone, there's a bigger space in that grid area.

When you want the comment section removed, instead of removing that grid item, why not remove the entire second row? grip-gap only works between grid items.

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

For complicated layouts, this solution is cumbersome at best. Seems there must be a way to handle this on the fly without having to re-define the entire grid-template-areas. — Dave, Mar 09 '21 at 18:10
@Dave - I would expect an extra `grid` property which toggles the ability to *ignore* named `grid-area` elements that aren't rendered, instead of dedicating an empty space, without checking if the element actually exists (in the DOM). That would be a game-changer for grid-based designs — vsync, Jan 26 '22 at 16:25
@Dave Yup, I agree. For application layout CSS is still pretty much crap. What we need is something like . — Lawrence Dol, Jun 27 '22 at 19:43

CSS grid, remove gap when area is optional

1 Answers1