I am attempting to create a grid layout using bootstrap, but I am facing an issue with positioning one of the columns.
I have tried adjusting the placement of the divs and using offsets/pulls, but so far I have not been successful.
To explain what I am aiming for, in the middle column there should be three blocks of equal height. Currently, there is a gap in the middle. Ideally, the columns should fill the available space if possible. This is illustrated below (not to scale).
https://i.stack.imgur.com/Bwwfb.png
http://www.bootply.com/KeQzWKbzPG
css
.grid-item--height2 { height: 202.5px; }
.grid-item--height5 { height: 405px; }
.grid-item--height7 { height: 607.5px; }
.tile {border:2.5px solid white; }
.blue-background {background-color:blue;}
.orange-background {background-color:orange;}
html
<html>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="col-md-5 grid-item--height2 blue-background tile text-center">
</div>
<div class="col-md-5 grid-item--height2 blue-background tile text-center">
</div>
<div class="col-md-2 grid-item--height2 orange-background tile text-center">
</div>
<div class="col-md-4 grid-item--height7 blue-background tile text-center">
</div>
<div class="col-md-4 grid-item--height2 blue-background tile text-center">
</div>
<div class="col-md-4 grid-item--height5 blue-background tile text-center">
</div>
<div class="col-md-4 grid-item--height2 blue-background tile text-center">
</div>
<div class="col-md-4 grid-item--height2 blue-background tile text-center">
</div>
<div class="col-md-4 grid-item--height2 blue-background tile text-center ">
</div>
</div>
</div>
</body>
</html>