CSS 网格中的列太高，导致网页在高度方面被吹掉

@media only screen and (max-width: 2560px) and (min-width: 1281px) {
  .container {
    width: 100vw;
    height: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 0px 0px;
    overflow-y: scroll;
  }
  .image {
    display: grid;
    height: auto;
    width: 100%;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 0px 0px;
    grid-area: 1 / 1 / 3 / 3;
    background-image: url(/img/herding.jpg);
    background-position: center;
    background-size: cover;
    background-attachment: local;
    transition: linear 0.2s;
  }
  .image:hover {
    width: 100%;
    height: auto;
    background-image: url(/img/dogs.jpg);
    background-position: center;
    background-size: cover;
    background-attachment: local;
    transition: linear 0.2s;
  }
  .title {
    grid-area: 2 / 1 / 3 / 3;
    background-color: rgba(90, 15, 15, 0.712);
    background-size: cover;
    background-attachment: local;
    margin-right: 225px;
    margin-top: 6em;
    padding: 2em;
  }
  .links {
    grid-area: 3 / 3 / 1 / 3;
    background-color: rgb(90, 15, 15);
    background-size: cover;
    background-attachment: local;
    padding: 1em;
  }
  .breeds {
    grid-area: 3 / 1 / 4 / 4;
    background-color: rgb(255, 240, 225);
    background-size: cover;
    background-attachment: local;
    padding: 1em;
  }
}

@media only screen and (max-width: 1280px) and (min-width: 0px) {
  .container {
    width: 100vw;
    height: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 0px 0px;
    overflow-y: scroll;
  }
  .image {
    display: grid;
    height: auto;
    width: 100%;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 0px 0px;
    grid-area: 1 / 1 / 3 / 4;
    background-image: url(/img/herding.jpg);
    background-position: center;
    background-size: cover;
    background-attachment: local;
    transition: linear 0.2s;
  }
  .image:hover {
    height: auto;
    width: 100%;
    background-image: url(/img/dogs.jpg);
    background-position: center;
    background-size: cover;
    background-attachment: local;
    transition: linear 0.2s;
  }
  .title {
    grid-area: 3 / 2 / 4 / 4;
    background-color: rgba(90, 15, 15, 0.712);
    background-size: cover;
    background-attachment: local;
    margin-top: 4em;
    margin-left: 2em;
    padding: 2em;
  }
  .links {
    grid-area: 3 / 1 / 4 / 2;
    background-color: rgb(90, 15, 15);
    background-size: cover;
    background-attachment: local;
    padding: 1em;
  }
  .breeds {
    grid-area: 3 / 2 / 4 / 4;
    background-color: rgb(255, 240, 225);
    background-size: cover;
    background-attachment: local;
    padding: 1em;
  }
}

<div class="container">
  <div class="image">
    <header class="title">
      <p style="font-family:'Forum'; font-size:2em; letter-spacing:.2em; color: rgb(255, 240, 225); text-shadow:5px 5px 5px rgb(90, 15, 15)">Canine Breeds</p>
    </header>
  </div>
  <div class="links">
    <h4>Top Ten Dog Breeds by Popularity</h4>
    <p>According to the AKC</p>
    <!-- <input id="breedsHTML" type="button" value="View"/>
                <input class="clear" type="button" value="Collapse"/> -->
    <div class="ajax-stuff" id="breeds-html"></div>
  </div>
  <div class="breeds">
    <div class="ajax_content">
      <h4>Winners of the Westminster Dog Show</h4>
      <p>In the past ten years</p>
      <!-- <input  id="breedsJSON" type="button" value="View"/>
                    <input class="clear" type="button" value="Collapse"/> -->
      <div class="ajax-stuff" id="breeds-json"></div>
    </div>
  </div>
</div>