CSS Grid Dillema - expand height of grid to encompass grid-items

1

I have a responsive grid that does not rely on media queries. However, I am completely stuck with trying to work out how to stop my grid items from overflowing from the grid container as it’s messing up any new sections that I add to the page. I know you can use the overflow property to create a scroll but it’s not the solution I’m looking for. I’ve tried setting the height of the section equal to auto and 100% but that doesn’t seem to solve it either.

What I would like is the height of the grid container, and section div, to expand to fit all of the grid-items. I have set the gallery background equal to blue to illustrate the issue. (See attached screenshot)

Screenshot 2020-05-17 at 20.47.58
Screenshot 2020-05-17 at 20.47.58922×1412 510 KB

<section class="spotlight">
          <h1 class="spotlight__heading">This weeks spotlight</h1>
          <div class="tab-group">
            <button class="tab active tab--text" href="#">All</button>
            <button class="tab tab--text" href="#">Covers</button>
            <button class="tab tab--text" href="#">Originals</button>
          </div>

          <div class="gallery">
            <div class="gallery-item">
              <img class="gallery-item__image" src="img/artist1-square.png">
              <div class="gallery-item__song">Song Title</div>
              <div class="gallery-item__artist">Artist</div>
            </div>
            <div class="gallery-item">
              <img class="gallery-item__image" src="img/artist2-square.png">
              <div class="gallery-item__song">Song Title</div>
              <div class="gallery-item__artist">Artist</div>
            </div>
            <div class="gallery-item">
              <img class="gallery-item__image" src="img/artist3-square.png">
              <div class="gallery-item__song">Song Title</div>
              <div class="gallery-item__artist">Artist test</div>
            </div>
            <div class="gallery-item">
              <img class="gallery-item__image" src="img/artist1-square.png">
              <div class="gallery-item__song">Song Title</div>
              <div class="gallery-item__artist">Artist</div>
            </div>
            <div class="gallery-item">
              <img class="gallery-item__image" src="img/artist2-square.png">
              <div class="gallery-item__song">Song Title</div>
              <div class="gallery-item__artist">Artist</div>
            </div>
            <div class="gallery-item">
              <img class="gallery-item__image" src="img/artist3-square.png">
              <div class="gallery-item__song">Song Title</div>
              <div class="gallery-item__artist">Artist</div>
            </div>
          </div>
        </section>

.spotlight {
   height: auto;

 }

 .spotlight__heading {
    color: $color-primary;
    font-size: $heading-mobile-sm;
    text-align: center;
  }

  .tab-group {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 60%;
    margin: 0 auto;
    padding: 0;
    align-items: stretch;
  }

  .tab {
    font-size: 1rem;
    background: none;
    border: none;
    cursor: pointer;
    width: 50%;

    &--text {
      color: black;
      width: 100%;
      border-radius: 10px;
      text-decoration: none;
    }
  }

  .active {
    padding: 5px;
    background: rgba(#0ACF83, 0.3);
    
  }

  .gallery {
    width: 60%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    grid-gap: 5%;
    margin: 5% auto;
    justify-content: space-around;
    background: blue;
  }

  .gallery-item {

    &__image {
      max-width: 100%;
      box-shadow: 0px 4px 52px rgba(0, 0, 0, 0.25);
      border-radius: 20px;
    }

    &__song {
      font-style: normal;
      font-weight: bold;
      font-size: 1.5rem;
      margin-top: 0.3rem;
      margin-left: 1.5rem;
    }

    &__artist {
      font-size: 1rem;
      margin-left: 1.5rem;
    }
  }