对于响应式布局，您可以使用CSS网格：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
  width: 50vw;
  aspect-ratio: 3 / 2;
}

.container>div {
  aspect-ratio: 1 / 1;
  border: 1px solid black;
  box-sizing: border-box;
}

.container>div:nth-child(1) {
  grid-column: 1;
  grid-row: 2 / span 2;
}

.container>div:nth-child(2) {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.container>div:nth-child(3) {
  grid-column: 3;
  grid-row: 2 / span 2;
}

.container>div:nth-child(4) {
  grid-column: 2;
  grid-row: 3 / span 2;
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

很明显，将容器宽度设置为您所需要的。
这个代码段从最左边的div开始以顺时针方式设置div。

我刚刚重新创建了你在上面发布的内容。当你指定你真正需要的内容时，我可以帮助你

.main {
  display: flex;
  height:100%;
  align-items:center
}
.sec{
  height: 50px;
  width: 50px;
  border:1px solid black
}

<div class="main">
  <div class="sec"></div>
  <div class="sec2">
    <div class="sec"></div>
    <div class="sec"></div>
  </div>
  <div class="sec"></div>
</div>

需要创建3列， Package 在Flex容器中并垂直对齐

.wrapper {
  display: flex;
}

.column {
  align-items: center;
}