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

Для свертки блока в CSS существует несколько подходов, и выбор конкретного метода будет зависеть от требований и требований вашего проекта. Вот несколько примеров различных методов, которые можно использовать для создания разнообразных макетов и стилей блоков.

1. Использование CSS Grid:
CSS Grid предоставляет мощные возможности для создания сложных и гибких макетов. Вы можете использовать свойства grid-template-rows, grid-template-columns и grid-gap для определения размеров и расположения элементов внутри блока. Например:

<div class="container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
</div>

.container {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}

.item1 {
  grid-row: 1 / 3;
}

.item2 {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
}

.item3 {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}

2. Использование flexbox:
Flexbox - это другой метод для создания гибких макетов. Вы можете использовать свойство display: flex для контейнера, а затем использовать свойство flex для элементов внутри контейнера. Например:

<div class="container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
}

.item1 {
  flex: 2 0 50%;
}

.item2 {
  flex: 1 0 25%;
}

.item3 {
  flex: 1 0 25%;
}

3. Использование позиционирования:
Вы можете использовать позиционирование, такое как относительное или абсолютное позиционирование, чтобы разместить элементы внутри блока. Например:

<div class="container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
</div>

.container {
  position: relative;
}

.item1 {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 60%;
}

.item2 {
  position: absolute;
  top: 0;
  right: 0;
  height: 50%;
  width: 40%;
}

.item3 {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 50%;
  width: 40%;
}

Это всего лишь несколько примеров различных подходов к сворачиванию блока в CSS. В зависимости от требований вашего проекта и ваших собственных предпочтений, вы можете смешивать эти подходы или выбирать один из них. Важно экспериментировать и находить оптимальное решение для вашего конкретного случая.