0

Okay, so I found this answer but I couldn't get rid of the margins, so If anyone has the solution for this. I would like to make this grid layout with no margins between each box.

Grid Layout

Community
  • 1
  • 1
matijarezek
  • 3
  • 4

2 Answers2

1

Check this fiddle here

For that purpose, you have to clear some paddings and try to use flexbox so that box-5 will take a height of all left boxes. So that, even if height of left boxes increases, height of box-5 will increase relatively.

Your sample HTML

<div class="main-wrapper"> 
    <div class="col-sm-8 left-wrapper">
        <div class="col-sm-7 smallbox box-1"> box1 </div>
        <div class="col-sm-5 smallbox box-2"> box2 </div>
        <div class="col-sm-5 smallbox box-3"> box3 </div>
        <div class="col-sm-7 smallbox box-4"> box4 </div>
    </div>
    <div class="col-sm-4 right-wrapper box-5"> box 5 </div>
</div>

Your relative CSS will be

/* use of flex-box for equal height columns */
.main-wrapper{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.left-wrapper{padding:0}
.smallbox {color:#FFFFFF; min-height:100px;}
.box-1{ background:#c49a6c}
.box-2{ background:#bcbec0}
.box-3{ background:#9b8579}
.box-4{ background:#3c2415}
.box-5{ background:#726658;color:#FFF}
Saurabh Sonawane
  • 941
  • 7
  • 9
0

user .row to remove the margins

.box {
  height: 250px;
  padding: 0;
}

#box-1 {
  background: #c39a6f;
}

#box-2 {
  background: #bcbec0;
}

#box-3 {
  background: #9a857a;
}

#box-4 {
  background: #3b2416;
}

#box-5 {
  background: #726659;
  height: 500px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
 <div class="row">
  <div class="col-md-8 col-sm-8">
   <div class="row">
    <div class="col-md-8 col-sm-8 box" id="box-1"></div>
    <div class="col-md-4 col-sm-4 box" id="box-2"></div>
    <div class="col-md-4 col-sm-4 box" id="box-3"></div>
    <div class="col-md-8 col-sm-8 box" id="box-4"></div>
   </div>
  </div>
  <div class="col-md-4 col-sm-4 box" id="box-5">
  </div>
 </div>
</div>
Hmache
  • 140
  • 1
  • 6