How can I make 3 grid design like this?

Harish Kumar 0
Viewed 45

3grid design image

I want to make a 3 grid design using bootstrap, like in the photo but I'm unable to do so!

css html
2 Answers

use css flexbox

index.html

<div class="container">
  <div class="big__box"></div>
  <div class="small__boxes">
    <div class="card">card 1</div>
    <div class="card">card 2</div>
  </div>
</div>

style.css

.container {
  display: flex;
}
.big__box {
  flex: 60%;
}
.small__boxes {
  flex: 40%;
  display: flex;
  flex-direction: column;
}

using bootstrap try this

 <div class="container">
  <div class="row">
    <div class="col-md-8">//big box</div>
    <div class="col-md-4">
      <div class="small__cards d-flex flex-column">
        <div class="box1">
          <!-- box 1 -->
        </div>
        <div class="box2">
          <!-- box 2 -->
        </div>
      </div>
    </div>
  </div>
</div>
user82659530

Assuming you are using bootstrap 4, maybe something like this?

<div class="container">
   <div class="row">
      <div class="col-md-8 d-flex justify-content-center m-0 p-0">
         <img src="https://dummyimage.com/600x400" class="img-fluid" />
      </div>
      <div class="col-md-4 justify-content-center m-0 p-0 pl-2">
         <div class="d-flex flex-column">
            <div>
              <img src="https://dummyimage.com/600x400" class="img-fluid" />
            </div>
            <div class="mt-2">
              <img src="https://dummyimage.com/600x400" class="img-fluid" />
            </div>
         </div>
      </div>
   </div>
</div>
richtea0
Related