如何实现这个CSS布局/网格 [英] How can I achieve this CSS layout/grid

问题描述

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

Hi, I was wondering how can I achieve a grid as shown above. Perhaps you guys have some tricks? :) I've tried Masonry, but I don't think it's fit for this.

我也使用Bootstrap，但它不必是Bootstrap。也许如果我有一些关键字，我可以谷歌，但我有nooo的想法究竟什么搜索。

I'm also using Bootstrap, but it doesn't have to be Bootstrap. Maybe if i'd had some keywords I could Google it, but I have nooo idea what exactly to search for.

推荐答案

这可以使用嵌套 flexbox 演示为您。

This can be done easily using nested flexboxes- created a demo for you.

调整高度和宽度 c> wrapper 以满足您的需求。
享受！

Adjust height and width of wrapper to suit your needs. Enjoy!

* {
  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布局/网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！