Grid container doesn't wrap rows

Question

I have a basic grid layout, but the container has a gap between the elements inside and the bottom. If I remove grid-template-rows: minmax(0, auto) auto; Then that space goes away but I need this property so box1 and box2 are at the top of the container. This proves more difficult when I toggle more content into box3.

Here is a fiddle showing the issue, the container is grey and you can see the excessive grey at the bottom under Box3 and the edge: Js fiddle here

I want the outcome to be like this:

.page-wrapper {
  background: #CCC;
}

.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  grid-auto-flow: row dense;
  grid-template-areas: "box1" "box3" "box2"
}

@media (min-width:768px) {
  .container {
    align-items: start;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(0, auto) auto;
    grid-template-areas: "box1 box3" "box2 box3"
  }
}

.box1 {
  grid-area: box1;
  background-color: #f00;
}

.box2 {
  grid-area: box2;
  background-color: #0f0;
}

.box3 {
  grid-area: box3;
  height: 300px;
  background-color: #00f;
  height: 100%;
  min-height: 100px;
}

.more {
  display: block;
  font-weight: bold;
  margin: 20px;
  cursor: pointer;
}

.stuff {
  display: none;
  height: 300px;
}

<div class="page-wrapper">
  <div class="container">
    <div class="box1">
      BOX 1
    </div>

    <div class="box2">
      BOX 2
    </div>

    <div class="box3">
      BOX 3
      <a class="more">[More info]</a>
      <div class="stuff"></div>
    </div>
  </div>
</div>

Answer 1

I believe I found the answer to this as:

grid-template-rows: minmax(0, auto) minmax(0, 1fr);