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.
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 . .';
}
Thanks randel that solved it. I really appreciate the help, even for tiny little issues like this.