Richie Richie - 2 months ago 6
CSS Question

How can I achieve this CSS layout/grid

Grid

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.

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.

Answer

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

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>