Flexable height Grid CSS

Question

I am attempting to move grid items up in the grid. Like so Example Image I've currently got

#search {
  width: 100%;
  .search-listing {
    width: 100%;
    .listing {
      padding-top: 30px;
      padding-left: 30px;
      padding-right: 30px;
      width: 100%;
      display: grid;
      grid-auto-rows: 1fr;
      grid-template-rows: repeat(50, auto);
      grid-template-areas: "card";
    }
    @media only screen and (min-width: 1200px) {
      .listing {
        grid-template-columns: repeat(4, 1fr);
      }
    }
    @media only screen and (max-width: 1200px) {
      .listing {
        grid-template-columns: repeat(3, 1fr);
      }
    }
    @media only screen and (max-width: 970px) {
      .listing {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media only screen and (max-width: 700px) {
      .listing {
        grid-template-columns: repeat(1, 1fr);
      }
    }
  }
}

I belive to be missing some sort of a single CSS tag in here but I don't know what it might be or what to google for.

All cards have a card class on them and are generated programatically.