CSS Grid leaves a gap between two grids

CSS Grid leaves a gap between two grids
0

#1

I’m finishing up my landing page (https://codepen.io/Crimson_Macaw/full/zLNLQM/) with CSS Grid and towards the end of the page there is a fairly sizable white gap between the ‘Espirutuosos’ section and the ‘Suscribete’ section. I haven’t used grid-gap on this page so I know that it isn’t a grid gap issue. Also, this doesn’t exist in any of the other 7 grids on the page, only between the two aforementioned grids. I would appreciate any and all help with fixing this tiny issue.


#2

On line 172 of your html, you have an extra </div> that should not be there.

FYI - Since your winegrid and liquorgrid classes have the exact same definition, you can delete one of the definitions and write:

.winegrid, .liquorgrid{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(3, minmax(50px, auto));
  text-align: center;
  background-color: #F9F9F9;
  grid-template-areas: 
    'header header header header header header'
    '. one two three four .'
    '. . five six . .';
}

#3

Thanks randel that solved it. I really appreciate the help, even for tiny little issues like this.