title: CSS grid: fit a block into an empty space
body: <p>I'm using a css grid generated with <a href="http://grids.heroku.com/" rel="nofollow noreferrer">grids.heroku.com</a> . For demonstration purposes I created a three-column grid. Here is the <a href="http://jsfiddle.net/RamanChodzka/SE6wc/" rel="nofollow noreferrer">demo</a>.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code> &lt;div class="container_3 clearfix"&gt;
   &lt;div class="grid_2"&gt;
       &lt;div class="grid_2 alpha omega highlighted" style="margin-bottom: 20px;"&gt;Some content content  content  content  content  content  content  content  content &lt;/div&gt;
       &lt;div class="grid_1 alpha highlighted"&gt;
           1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0
       &lt;/div&gt;
       &lt;div class="grid_1 omega highlighted"&gt;
           0 9 8 7 6 5 4 3 2 1 0 9 8 7 6 5 4 3 2 1 0 9 8 7 6 5 4 3 2 1 0 9 8 7 6 5 4 3 2 1 0 9 8 7 6 
       &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="grid_1 highlighted"&gt;
       Content content content content content content content content content content content content content content
   &lt;/div&gt;
  
   &lt;div class="grid_2 target"&gt;
           123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 
   &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.container_3 {
      background: yellow;
  }
  .highlighted {
      background: green;
  }
  .target {
      background: red;
  }
  
  /*grid css*/
  body {
    min-width: 240px;
  }
  .container_3 {
      margin-left: auto;
      margin-right: auto;
      width: 240px;
  }
  .grid_1,
  .grid_2,
  .grid_3 {
      display:inline;
      float: left;
      position: relative;
      margin-left: 10px;
      margin-right: 10px;
  }
  
  .push_1, .pull_1,
  .push_2, .pull_2,
  .push_3, .pull_3 {
      position:relative;
  }
  .alpha {
      margin-left: 0;
  }
  .omega {
      margin-right: 0;
  }
  .container_3 .grid_1 {
      width:60px;
  }
  
  .container_3 .grid_2 {
      width:140px;
  }
  
  .container_3 .grid_3 {
      width:220px;
  }
  .container_3 .prefix_1 {
      padding-left:80px;
  }
  .container_3 .prefix_2 {
      padding-left:160px;
  }
  .container_3 .suffix_1 {
      padding-right:80px;
  }
  .container_3 .suffix_2 {
      padding-right:160px;
  }
  .container_3 .push_1 {
      left:80px;
  }
  
  .container_3 .push_2 {
      left:160px;
  }
  .container_3 .pull_1 {
      left:-80px;
  }
  .container_3 .pull_2 {
      left:-160px;
  }
  .clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
  }
  .clearfix:before,
  .clearfix:after {
    content: '\0020';
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
  }
  
  .clearfix:after {
    clear: both;
  }
  .clearfix {
    zoom: 1;
  }
  </code></pre>
  
  <p><strong>How can I fit the red block into the empty space in the second and the third columns?</strong></p>
  
  <p>Here is a picture of what I'm trying to achieve</p>
  
  <p><img src="https://i.stack.imgur.com/p6flY.png" alt=""></p>
  
  <p>The columns can be of any height depending on content length.</p>