I am trying to make a responsive grid section using media queries and CSS grid. The grid looks fine on full width but as soon as 999px and 750px media queries kick in I begin to have a strange problem where I have extra CSS grid gutters on the right and on the bottom of the grid.
.categories-grid > .website-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-template-areas:
"nails nails offers offers"
"image image kids-img kids"
"image image hair hair-img";
gap: 40px 35px;
height: 1060px;
}
@media only screen and (max-width: 999px) .categories-grid > .website-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-template-areas:
"nails nails"
"kids-img kids"
"hair hair-img"
"offers offers";
gap: 30px 25px;
height: auto;
}
@media only screen and (max-width: 750px) .categories-grid > .website-grid {
grid-template-columns: repeat(1, 1fr);
grid-template-rows: repeat(6, 1fr);
grid-template-areas:
"nails"
"offers"
"kids-img"
"kids"
"hair-img"
"hair";
}
