Before you lay out the gallery, give it enough to lay out. Three cards would sit in one row on a wide screen and never show the grid wrapping. Add three more, so the gallery has six and the columns visibly fill and wrap as the screen changes width.

Each new card is the same shape you already know — an <article class="picture-card"> with a header (image + favourite button) and a body (title + date). Only the content differs: three more real APOD pictures, each with its own honest alt, real width/height, and loading="lazy".

<article class="picture-card">
  <div class="card-header">
    <img src="…/CrescentSaturn_cassini_1080.jpg" alt="Crescent Saturn"
         width="1080" height="682" loading="lazy">
    <button class="fav-btn" title="Save to collection" aria-label="Save to collection">♡</button>
  </div>
  <div class="card-body">
    <h2>Crescent Saturn</h2>
    <p class="picture-date">2019-07-07</p>
  </div>
</article>

The other two are the Spanish Dancer spiral galaxy (960×951 — nearly square) and the Magellanic galaxy NGC 55 (1024×1024 — a perfect square). Their dimensions are all different again, which is the point: whatever shape the source is, object-fit: cover and the grid make every card an identical tile. The code column has all six in full.

Notice the markup didn't need to know anything about layout. The cards are just content in normal flow — still a stack right now. The next step adds a single rule to the container around them, and the same six articles become a gallery.