How to remove the unwanted spacing in CSS grid with items of fixed width but unknown/variable height?

Question

I want to create a UI similar to Google Keep. the grid will have 3 columns of same width. and there will be several boxes, each of which will have same width, but the height will be different for all. Now, the following code is what I wrote(But it gives some empty spacing)

#main-app {
  overflow-y: scroll;
  overflow-x: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: repeat(auto-fit, auto);
  gap: 20px;
  padding: 20px;
  height: calc(100vh - var(--header-height) - var(--status-bar-height));
  align-items: center;
  justify-content: start;
}

.main-item {
  width: 100%;
  background-color: var(--component-shade-one-light);
  border-radius: 20px;
}

#b1 {
  height: 500px;
}

#b2 {
  height: 250px;
}

#b3 {
  height: 400px;
}

#b4 {
  height: 250px;
}

#b5 {
  height: 300px
}

<section id="main-app">
  <div class="main-item" id="b1"></div>
  <div class="main-item" id="b2"></div>
  <div class="main-item" id="b3"></div>
  <div class="main-item" id="b4"></div>
  <div class="main-item" id="b5"></div>
</section>

NOTE : you may use JS, but NO LIBRARIES please.

This is what I was expecting: expectation

This is what I got: output