Html 如何创建这样的网格布局？

我正在尝试重新创建类似这样的网格。但是，我在这里被打动了。 请告诉我该怎么办

---

欢迎来到StackOverflow，一般来说，展示您的尝试和遇到的困难是很好的

这是一个起点：

部分{
显示器：flex；
对齐项目：居中
}
.街区{
高度：100px；
宽度：100px；
边框：1px纯黑；
利润率：20px
}

---

最好使用flexbox，给它一列一行，然后用边距将它们分开。 您还需要为两个矩形创建一个div，这两个矩形将位于此列中，另一个div用于第一行

  <div class="cointainer">
    <div class="column">
        <div class="rectangle1"> </div>
        <div class="rectangle2"> </div>
    </div>
    <div class="row">
        <div class="rectangle3"></div>

        <div class="rectangle4"></div>
    </div>
</div>

欢迎来到stackoverflow。发帖时，遵循一些社区规范是个好主意，因为它们将帮助你获得更好的答案。看一看这篇关于“如何提出一个好问题？”（）的文章，其中有一些关于创建“最小的、可复制的示例”的有用细节。非常感谢。成功了。那么，我应该如何使这部手机具有响应性呢。所有的积木必须填满整个屏幕宽度，并且应该一个接一个地堆放。非常感谢。我尝试使用order属性和宽度设置为100%，但它似乎对我不起作用。