Как с помощью Grid CSS / Flex CSS сделать такую сетку с блоками?

Проблема в том, что я не знаю сколько блоков у меня может быть. Ширина каждого блока 351px. Высота блока определяется количеством текста в нём. Блоки адаптивные, т.е. при сужении страницы, минимальное количество блоков должно быть 1, остальные переносятся на другую строку. А при расширении страницы - ограничено только разрешением экрана. Каждый блок должен притягиваться друг к другу:

Вот мой CSS:

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(351px, 351px));
  gap: 16px;
  align-items: start;
  justify-content: center;
}

.grid-element {
  background-color: lightskyblue;
  padding: 20px;
  border-radius: 5px;
}

<div class="grid-container">
  <div *ngFor="let item of cards" class="grid-element">
    {{ item.text }}
  </div>
</div>

В итоге, хотелось бы вот так:

Подскажите, задача вообще выполнимая?