How can I achieve this CSS layout/grid

Question

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 1

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>

Answer 2

Yes, you can do this with Bootstrap.

The major element will be one row with 2 div's (50% each, soo col-md-6 for example). The div on the right will have 2 row on his own, each with 50% of the height of his parent element. The second row of this will have 2 columns himself, with col-md-6 again. Don't forget each time you have a row or a container, you should always consider the 12 columns system again!

<div class="row">
  <div class="col-md-6">
  </div>
  <div class="col-md-6">
    <div class="row half-height">
       <div class="col-md-12">
       </div>
    </div>
    <div class="row half-height>
       <div class="col-md-6">
       </div>
       <div class="col-md-6">
       </div>
    </div>
  </div>
</div>

Not much time to do a jsfiddle, but I think it was clear

Answer 3

You would be looking at something similar to this (Note: This is just one of the many solutions available

Fiddle

What you do is you use the bootstraps grid system to create your shapes accordingly and you set the height of the left box (big box) to double the height of the smaller box

<div class="container"> 
    <div class="row">
        <div class="col-md-6" style="background-color:green;height:600px;">
        </div>
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-12" style="background-color:blue;height:300px">          
                </div>
            </div>
            <div class="row">
                <div class="col-md-6"style="background-color:yellow;height:300px"></div>
                <div class="col-md-6"style="background-color:red;height:300px"></div>
            </div>
        </div>
    </div>
</div>

As you can see in this code I have given the smaller voxes a height equal to half of the big box's height, the colors are just for visual representation and serve no function whatsoever, by using col-md-6 you can fit two columns in one row, which is what we need in your case, *Note, bootstrap has 12 columns* by using this we can safely assume that in the left box we need one div that's 12 columns wide in the first nested row (since we have two rows of smaller boxes we are using a nested row) and two boxes that are 6 columns wide in the second nested row.

Ofcourse in your case the inline style attributes will be moved to your style.css file

Hope this helps!