аюсь создать макет кладкииспользуя компоновку сетки CSS, Все элементы в сетке имеютпеременная высоты. И я не знаю, какие предметы будут. Так что я не могу определитьgrid-row за каждый предмет. Можно ли начинать каждый новый элемент сразу после окончания предыдущего в столбце?

Код я пытаюсь:

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, 330px);
  align-items: flex-start;
  grid-column-gap: 10px;
  grid-row-gap: 50px;
}

.item {
  background: black;
  border-radius: 5px;
}

<div class="wrapper">
  <div class="item" style="height:50px"></div>
  <div class="item" style="height:100px"></div>
  <div class="item" style="height:30px"></div>
  <div class="item" style="height:90px"></div>
  <div class="item" style="height:80px"></div>
  <div class="item" style="height:50px"></div>
  <div class="item" style="height:70px"></div>
  <div class="item" style="height:40px"></div>

</div>

полный код здесь