Remove empty spaces in a CSS grid container with uneven item sizes

Question

I have the following HTML & CSS code:

.grid{
    width: 350px;
    padding: 30px 0;
    display: grid;
    justify-items: center;
    align-content: flex-start;
    grid-template-columns: 1fr 1fr;
    background-color: gray;
    row-gap: 15px;
}

.item{
    width: 80px;
    height: 80px;
    background-color:yellow;
}

.medium{
    height: 150px;
}

.big{
    height: 200px;
}

<div class="grid">
  <div class="item"></div>
  <div class="item big"></div>
  <div class="item"></div>
  <div class="item medium"></div>
  <div class="item big"></div>
  <div class="item"></div>
</div>

How can I get the grid container not to have those empty spaces that seem to occur when a grid item is bigger than the one on the other column, like, filling those empty spaces by moving up the grid items that are below? Is it even possible?