title: Image Grid - Different Heights
body: <p>I'm working on a layout for a responsive grid with icons that have the same width but different heights. </p>
  
  <p>Here is a mock up in JS Fiddle:</p>
  
  <p><a href="https://jsfiddle.net/amykirst/htqxttan/3/" rel="nofollow">https://jsfiddle.net/amykirst/htqxttan/3/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="expertise"&gt;
      &lt;div class="icon-wrapper"&gt;
          &lt;div class="img"&gt;&lt;/div&gt;
          &lt;p&gt;Label&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="icon-wrapper"&gt;
          &lt;div class="img" style="height: 60px"&gt;&lt;/div&gt;
          &lt;p&gt;Label&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="icon-wrapper"&gt;
          &lt;div class="img"&gt;&lt;/div&gt;
          &lt;p&gt;Label&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="icon-wrapper"&gt;
          &lt;div class="img"&gt;&lt;/div&gt;
          &lt;p&gt;Label&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="icon-wrapper"&gt;
          &lt;div class="img"&gt;&lt;/div&gt;
          &lt;p&gt;Label&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="icon-wrapper"&gt;
          &lt;div class="img" style="height: 50px"&gt;&lt;/div&gt;
          &lt;p&gt;Label&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="icon-wrapper"&gt;
          &lt;div class="img" style="height: 70px"&gt;&lt;/div&gt;
          &lt;p&gt;Label&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>* {
    box-sizing: border-box;
  }
  
  body {
    padding: 1rem;
  }
  
  .icon-wrapper .img {
    display: inline-block;
    width: 4rem;
    height: 4rem;
    background-color: red;
  }
  
  
  .icon-wrapper p {
    text-align: center;
  }
  
  .expertise {
  text-align: justify;
  }
  
  .expertise:after {
    content: " ";
    display: inline-block;
    width: 100%;
  }
  
  .icon-wrapper {
      margin: 0 auto;
      background-color: blue;
      display: inline-block;
       vertical-align: bottom;
    margin-top: 1rem;
  }
  </code></pre>
  
  <p>The red boxes are placeholders for images and will be image tags in the real thing. </p>
  
  <p>I'm having a difficult time making the images justify so that the outer images touch the edge of the page and there is an equal distance between the images. </p>
  
  <p>When I add empty gap elements, as recommended in <a href="http://www.barrelny.com/blog/text-align-justify-and-rwd/" rel="nofollow">this tutorial</a>, it no longer spans the width of the page when the page is full width. The gap elements are there taking up space. And at some smaller screen sizes, the space between the images on the top row is different than the space on the bottom row.</p>
  
  <p>The width of the images will always be the same - the space between them should change based on the screen size. </p>
  
  <p>When there are an unequal number of images in the bottom row, it should justify left.</p>
  
  <p><a href="http://i.snag.gy/VHJsV.jpg" rel="nofollow">Here is an example of what I'm trying to achieve.</a></p>