css - 我怎样才能实现这个 CSS 布局/网格

Question

您好，我想知道如何实现如上所示的网格。也许你们有一些技巧？ :) 我试过 Masonry，但我认为它不适合这个。

我也在使用 Bootstrap，但不一定是 Bootstrap。也许如果我有一些关键字我可以谷歌它，但我不知道到底要搜索什么。

Answer 1

这可以使用嵌套的 flexboxes 轻松完成 - 为您创建了一个演示。

调整 wrapper 的 height 和 width 以满足您的需要。享受吧!

* {
  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>