Question

我正在尝试重新创建类似这样的网格。但是，我在这里感到震惊。请让我知道该怎么办？

https://i.stack.imgur.com/KSyXo.jpg

Answer 1

欢迎使用StackOverflow，通常最好显示您尝试过的内容以及遇到的问题。

这是一个起点：

section {
  display: flex;
  align-items: center
}

.block {
  height: 100px;
  width: 100px;
  border: 1px solid black;
  margin: 20px
}

<section>
  <div class="col">
    <div class="block"></div>
  </div>
  <div class="col">
    <div class="block"></div>
    <div class="block"></div>
  </div>
  <div class="col">
    <div class="block"></div>
  </div>
</section>

Answer 2

最好使用flexbox并为其指定1列和1行，并在使用margin分隔它们之后。您还需要为将位于此列中的两个矩形创建一个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>

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

2 个答案: