Как реализовать такой блок?

Question

[corasao]

Всем привет!

Посоветуйте, пожалуйста, как лучше реализовать такой блок?


Контента в каждом блоке может быть разное количество, поэтому нужно гибкое решение

Возможно встречали примеры такой реализации?

Буду благодарен за ответы!

Comments

[corasao]

Evgenii,
точность и гибкость с макетом мне удалось получить таким образом

<ul class="block">
            <li class="block__item"></li>
            <li class="block__item"></li>
            <li class="block__item"></li>
            <li class="block__item"></li>
            <li class="block__item"></li>
            <li class="block__item"></li>
          </ul>

.block {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.block__item:nth-child(1) {
  padding-top: 200px;
}
.block__item:nth-child(2) {
  padding: 100px 0;
}
.block__item:nth-child(3) {
  padding-bottom: 200px;
}
.block__item:nth-child(5) {
  margin-top: -100px;
}
.block__item:nth-child(6) {
  margin-top: -200px;
}

скорее всего есть вариант проще и более правильный