Responsive gallery (HTML/CCS) not working - html

Question

This is my first time on Stack Overflow. I recently started learning about HTML/CCS and I am stuck on a current project.
I wanted to make a gallery of album covers for a project, but whenever I 'zoom' in on the webpage (probably not the right term) the lay-out goes crazy. I think this issue is a 'responsive' issue and I tried adding a media query but i can 't make it look decently.
How can I change so that for example, it goes from a row of 5 album covers to 4 without there being gaps in the gallery? It goes from looking decent to 4 white squares in the same row.
I took the relevant code and pasted it in this link, if this isn't enough information I'd be happy to show all the code (it's still a bit of a mess, hence why I took this piece of code out of the full page)
https://codepen.io/LotteElders/pen/ZEpeRzN
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
.responsive {
padding: 0 6px;
float: center;
width: 24.99999%;
}
#media only screen and (max-width: 700px) {
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
#media only screen and (max-width: 500px) {
.responsive {
width: 100%;
}
}
<figure>
<figcaption>
<h3> A summary of Cady Groves's albums </h3>
</figcaption>
<div class="gallery">
<a target="_blank" href="https://open.spotify.com/album/1oN2SgPwi43flviKj6rbBA">
<img src="https://m.media-amazon.com/images/I/714Jha+uaKL._SS500_.jpg" alt="Album cover of A Month of Sundays" width="600" height="400">
</a>
<div class="desc">A Month of Sundays (2009)</div>
</div>
<div class="gallery">
<a target="_blank" href="https://open.spotify.com/album/1vW2HVeeXpmGBbpLkzt375">
<img src="https://images.genius.com/0add2529149d47b12983fa2e4a07b2a6.300x300x1.jpg" alt="Album cover of The Life of a Pirate (2010)" width="600" height="400">
</a>
<div class="desc">The Life of a Pirate (2010)</div>
</div>
<div class="gallery">
<a target="_blank" href="https://open.spotify.com/album/6csTNqy5qkYCzPFJyHDA67">
<img src="https://m.media-amazon.com/images/I/71WUWQUq4-L._SS500_.jpg" alt="Album cover of This Little Girl" width="600" height="400">
</a>
<div class="desc">This Little Girl (2012)</div>
</div>
<div class="gallery">
<a target="_blank" href="https://open.spotify.com/album/5HYv3SmW85lbspRTA1rDY0">
<img src="https://img.discogs.com/vCdTJTKCznRPIgplZuMLAZeIoio=/fit-in/300x300/filters:strip_icc():format(jpeg):mode_rgb():quality(40)/discogs-images/R-14325893-1572275353-3944.jpeg.jpg" alt="Album cover of Dreams" width="600" height="400">
</a>
<div class="desc">Dreams (2015)</div>
</div>
<div class="gallery">
<a target="_blank" href="https://open.spotify.com/album/0k7vFx71y0w5r6RGhDMAfG">
<img src="https://images.genius.com/558fcb01fc43d257d8663b625cfa7086.1000x1000x1.jpg" alt="Album cover of Bless My Heart (2020)" width="600" height="400">
</a>
<div class="desc">Bless My Heart (2020)</div>
</div>
<div class="gallery">
<a target="_blank" href="https://open.spotify.com/album/7swc0NVH2XCLH1EAXnbsP3">
<img src="https://cont-5.p-cdn.us/images/public/int/9/3/2/2/886444042239_1080W_1080H.jpg" alt="Single cover of Forget You (2013)" width="600" height="400">
</a>
<div class="desc">Forget You (2013)</div>
</div>
<div class="gallery">
<a target="_blank" href="https://open.spotify.com/album/5jiaYe6RTZ5jpcqGbIVVyO">
<img src="https://resources.tidal.com/images/d4bbe9f2/bcdc/4489/81ef/42580782144b/640x640.jpg" alt="Album cover of This Little Girl" width="600" height="400">
</a>Whiskey & Wine feat. Christian Burghardt (2015) </div>
</div>
<div class="gallery">
<a target="_blank" href="https://open.spotify.com/album/6wUnijjeRKwBTqJSb7TcF4?highlight=spotify:track:3cXEhlI2PKHEjDt39I2upA">
<img src="https://images.genius.com/e45451e414fac83f6523a491f652a14a.500x500x1.jpg" alt="Single cover of Love Actually (2012)" width="600" height="400">
</a>
<div class="desc">Love Actually (2012)</div>
</div>
<div class="gallery">
<a target="_blank" href=https://open.spotify.com/album/0m2SFT766eRgMkzIjQHTOn?highlight=spotify:track:5eue4RoH3PG3k9qWdTwjL8>
<img src="https://images-na.ssl-images-amazon.com/images/I/91MNZnhU74L._SL1500_.jpg" alt="Single cover of Oh, Darling (2012)" width="600" height="400">
</a>
<div class="desc">Oh, Darling feat. Plug In Stereo (2012)</div>
</div>
</figure>
Thank you for reading this!

Answer 1

Please add the codes that I wrote.
figure {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
align-items: center;
justify-content: center;
}