css - 如何实现此CSS布局/网格

嗨，我想知道如何实现如上所示的网格。也许你们有一些花招？ :)我已经尝试了砌体，但是我认为这不合适。

我也在使用Bootstrap，但不必是Bootstrap。也许如果我有一些关键字，我可以用Google来搜索它，但是我不知道要搜索什么。

最佳答案

可以使用嵌套的flexbox es-为您创建一个演示轻松地完成此操作。

调整height的width和wrapper以适合您的需求。
请享用！

* {
  box-sizing: border-box;
}
.wrapper {
  display: flex;
  height: 250px;
}
div {
  background: rgb(0, 140, 88);
}

.wrapper > div:first-child {
  width: 50%;
}
.wrapper > div:last-child {
  display: flex;
  flex-direction: column;
  width: 50%;
  height: 100%;
}

.wrapper > div:last-child > div:first-child {
  width: 100%;
  height: 50%;
  background: #2ba982;
}
.wrapper > div:last-child > div:last-child {
  height: 50%;
  display: flex;
}

.wrapper > div:last-child > div:last-child > div {
  width: 50%;
  height: 100%;
}
.wrapper > div:last-child > div:last-child > div:first-child {
  background: #76c6ac;
}
.wrapper > div:last-child > div:last-child > div:last-child {
  background: #bbe2d5;
}

<div class="wrapper">
  <div></div>
  <div>
    <div></div>
    <div>
      <div></div>
      <div></div>
    </div>
  </div>
</div>

关于css - 如何实现此CSS布局/网格，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39343852/