响应库(HTML/CCS)不工作

Question

这是我第一次使用Stack Overflow。我最近开始学习HTML/CCS，我被当前的项目卡住了。我想为一个项目制作一个相册封面的画廊，但每当我“放大”网页(可能不是正确的术语)时，布局就会变得疯狂。我认为这个问题是一个“响应式”的问题，我试着添加了一个媒体查询，但我不能让它看起来很好。例如，我如何才能使它从一排5张专辑封面变成4张专辑封面，而画廊中没有空隙?它从看起来不错变成了同一行中的4个白色方块。

我把相关的代码粘贴到这个链接中，如果这不是足够的信息，我很乐意展示所有的代码(它仍然有点乱，所以我从整个页面中删除了这段代码)

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>

​

感谢你阅读这篇文章！

Answer 1

请添加我写的代码。

figure {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  align-items: center;
  justify-content: center;
}