Как сверстать нестандартный грид блок?

Question

[starkingdom]

Как можно сверстать такой блок

Я пробовал разные варианты но не через grid, ни через flex такое не выходит

Comments

[Ankhena]

Три колонки, три строки. Большие карточки занимают по 2 строки (span 2).
Что именно у вас не получилось?
Если нужно, чтобы повторялось, то соответственно, через nth-child.

[starkingdom]

Ankhena, вы попробуйте это сделать что описали, и поймете в чем суть проблемы данного решения. А так же сравните, что получилось и что на скрине моем

[Ankhena]

starkingdom,
Да вот из древнего вопроса
https://jsfiddle.net/Ankhena/8ps6g5ur/

[Сергей delphinpro]

starkingdom, starkingdom,

вы попробуйте это сделать что описали

Что там пробовать-то?
Вот ваша сетка 3x3

Answer 1

[sergski]

Самый очевидный и надёжный способ -- 3 колонки с контентом сверху-вниз. Или вот. Или гуглите Masonry

Answer 2

[Антон]

column count: 3

<div class="parent">
  <div class="item">aaa</div>
  <div class="item">aaa</div>
  <div class="item">aaa</div>
  <div class="item">aaa</div>
  <div class="item">aaa</div>
  <div class="item">aaa</div>
</div>

.parent {
  column-count: 3;
}
.item {
  page-break-inside: avoid;
  border:1px solid #f00;
  height:50vh;
  margin-bottom: 30px;
}
.item:nth-child(3) {
  height: 60vh;
}
.item:nth-child(4) {
  height: 40vh;
}