Формирование списка по высоте блока в React

Так как не вижу кода который Вы САМИ сделали, то приведу пример реализации на чистом css, как в принципе можно сделать такое с помощью grid. В реакт и под ваши нужды сделаете сами. Данный пример сделан для 7 элементов. Если добавить 8 и больше стили надо править чтобы сохранились пропорции как на скриншоте. Идея данного примера в том, что изменяя размер контейнера, он будет всегда сохранять данные пропорции, как и написано в вопросе. Есть готовая библиотека которая делает похожую сетку красивую и с анимациями и прочим, только не помню её название, но найти можно. Легче воспользоваться ей.

А так в качестве домашнего задания. Делаете функцию которая читает кол-во элементов списка загруженного, а далее на основе данного кол-ва высчитывает grip-column и grid-row для каждого элемента и подставляет в style элементов при выводе.

Если же у вас такой список с пагинацией, например на странице может выводиться 10 элементов, то просто измените css для 10 элементов 1 раз и всё. Далее при смене страницы, у вас всегда будет валидный вывод

.container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto;
  grid-auto-flow: row;
  border: 1px solid;
  height: 400px;
  width: 400px;
  gap: 30px;
}

.item {
  display:flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: white;
}

.item-main {
  grid-row: span 2;
}

.item1 {
  background-color: yellow;
  grid-row: span 5;
}

.item2 {
  background-color: green;
}

.item3 {
  background-color: purple;
  grid-row: span 3;
}

.item4 {
  background-color: blue;
}

.item5 {
  background-color: lightgreen;
  grid-column: 3;
  grid-row: span 4;
}

.item6 {
  background-color: brown;
}

.item7 {
  background-color: lightblue;
}

<div class="container">
  <div class="item item1">1</div>
  <div class="item item-main item2">2</div>
  <div class="item item3">3</div>
  <div class="item item-main item4">4</div>
  <div class="item item5">5</div>
  <div class="item item-main item6">6</div>
  <div class="item item-main item7">7</div>
</div>