title: Boostrap mix with grid to equal height of row inside .col
body: <p>I want to set my code to auto-calculate equal height in inside of .col, because for example inside .col I have <code>&lt;h2&gt;</code> and <code>&lt;p&gt;</code> which could have different number of rows, so height of this element will be different for every .col, I would like to get same height for all rows inside .col.</p>
  
  <p>I tried to use flexbox utilities, but I didn't find a solution, so I am wondering if grid will help me get what I want to get, but I don't know if display: grid inherits height of flexbox elements?</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-4"&gt;
        &lt;div class="header-bottom-box"&gt;
          &lt;h2&gt;Projektowanie &lt;b&gt;stron&lt;/b&gt;&lt;/h2&gt;
          &lt;div class="img-container"&gt;
            &lt;img src="http://irson.linuxpl.eu/images/projektowanie-stron.jpg" class="img-fluid" alt="Projektowanie stron"&gt;
          &lt;/div&gt;
          &lt;p&gt;Projektowanie oraz tworzenie serwisów internetowych.&lt;/p&gt;
          &lt;div class="text-right"&gt;
            &lt;a href="/oferta.html"&gt;więcej&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-4"&gt;
        &lt;div class="header-bottom-box"&gt;
          &lt;h2&gt;Pozycjonowanie &lt;b&gt;stron&lt;/b&gt;&lt;/h2&gt;
          &lt;div class="img-container"&gt;
            &lt;img src="http://irson.linuxpl.eu/images/pozycjonowanie-stron.jpg" class="img-fluid" alt="Pozycjonowanie stron"&gt;
          &lt;/div&gt;
          &lt;p&gt;Zwiększ pozycję swojej strony www w wynikach wyszukiwania.&lt;/p&gt;
          &lt;div class="text-right"&gt;
            &lt;a href="/oferta.html"&gt;więcej&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-4"&gt;
        &lt;div class="header-bottom-box"&gt;
          &lt;h2&gt;Outsourcing &lt;b&gt;IT&lt;/b&gt;&lt;/h2&gt;
          &lt;div class="img-container"&gt;
            &lt;img src="http://irson.linuxpl.eu/images/outsourcing-it.jpg" class="img-fluid" alt="Outsourcing IT"&gt;
          &lt;/div&gt;
          &lt;p&gt;Outsourcing informatyczny Profesjonalna opieka informatyczna dla firm.&lt;/p&gt;
          &lt;div class="text-right"&gt;
            &lt;a href="/oferta.html"&gt;więcej&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://codepen.io/anon/pen/jRweow" rel="nofollow noreferrer">https://codepen.io/anon/pen/jRweow</a></p>
  
  <p>I thought about using display: grid to .header-bottom-box and equal height of inside element.</p>
  
  <p>EDIT
  I tried to use GIRD:</p>
  
  <p><a href="https://i.stack.imgur.com/g7kBC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/g7kBC.png" alt="enter image description here"></a></p>
  
  <p>And it works like I want to, but I don't know why I get this white space, how to delete it?</p>