Gap between rows

I have a problem with some gaps in my code.

The problem is that the gap between the grid rows is too big. It only makes itself normal when i add more photos or when i set the .image height to 100% but then it stretches out the photo.

The second gap that i am trying to solve is between the 2 flex items .description and #gallery.

It only works when i set the gallery height to 100% but then the gap between the grid rows becomes bigger...

This is my HTML and CSS

main {
  display: flex;
  text-align: center;
  margin: 0px 10px 0px;
  height: 100%;
  flex-wrap: wrap;
  flex: 1;
  overflow-y: auto;
  padding: 0px 5px;
  margin: 0px;
}

#gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50rem, 1fr));
  column-gap: 10px;
  row-gap: 10px;
  margin: 0px 30px;
  top: 0px;
  align-items: stretch;
}

.image {
  display: block;
  width: 100%;
  object-fit: cover;
  margin: 0px;
}

.description {
  font-size: 1.8rem;
  padding-top: 0px;
}

<main>
  <p class="description"> text</p>
  <div id="gallery">
    <a href="01.jpg"><img class="image"  src="https://placekitten.com/408/287" alt=""></a>
    <a href="01.jpg"><img class="image"  src="https://placekitten.com/408/287" alt=""></a>
    <a href="01.jpg"><img class="image"  src="https://placekitten.com/408/287" alt=""></a>
    <a href="01.jpg"><img class="image"  src="https://placekitten.com/408/287" alt=""></a>
  </div>
</main>

Thank you!