我试图用基于负边距的网格系统（susy）实现类似网格的模式，但失败了。
我尝试使用 Flexbox，但我不确定它是否真的可行，我认为最好的方法是 2 列（A 侧和 B 侧），并为框 (1) 提供框 2 的 50% 的伸缩高度，但它不知何故似乎不起作用。
据我所知，这是可行的。
.block {
width: 100%;
background: grey
}
.column {
align-content: stretch;
display: flex;
flex-flow: column wrap;
width: 50%;
}
.box_long {
background-color: pink;
flex: 0 0 50%;
padding: 20px;
border: solid 1px black;
}
.box_small {
background-color: blue;
flex: 0 0 25%;
padding: 20px;
border: solid 1px black;
}
.box_big {
background-color: green;
flex: 0 0 100%;
padding: 20px;
border: solid 1px black;
}<div class="block">
<div class="column">
<div class="box_long">
</div>
<div class="box_big">
</div>
</div>
<div class="column">
<div class="box_small">
</div>
<div class="box_small">
</div>
<div class="box_small">
</div>
<div class="box_small">
</div>
<div class="box_long">
</div>
</div>
</div>这是一种可能适合您的方法：
（没有对 HTML 进行任何更改。）
.block {
display: flex;
height: 100vh;
background: grey;
}
.column {
display: flex;
flex-wrap: wrap;
width: 50%;
}
.box_big {
flex-basis: 100%;
height: 70%;
background-color: chartreuse;
border: solid 1px black;
}
.box_small {
flex: 0 0 50%;
height: 35%;
background-color: aqua;
border: solid 1px black;
}
.box_long {
flex-basis: 100%;
height: 30%;
background-color: violet;
border: solid 1px black;
}
* {
margin: 0;
box-sizing: border-box;
}<div class="block">
<div class="column">
<div class="box_long"></div>
<div class="box_big"></div>
</div>
<div class="column">
<div class="box_small"></div>
<div class="box_small"></div>
<div class="box_small"></div>
<div class="box_small"></div>
<div class="box_long"></div>
</div>
</div>