title: Creating a fluid 3 column layout for images to be displayed
body: <p>I'm wanting to create a layout for a portfolio. On large screens, it has three columns, containing images evenly spaced out. Here is an example of what I mean: </p>
  
  <p><a href="http://www.yourinspirationweb.com/wp-content/uploads/2012/09/portfolio-3-colonne.png" rel="nofollow">http://www.yourinspirationweb.com/wp-content/uploads/2012/09/portfolio-3-colonne.png</a></p>
  
  <p>I have created a rough jsfiddle here: <a href="http://jsfiddle.net/3h2fm6pb/1/" rel="nofollow">http://jsfiddle.net/3h2fm6pb/1/</a></p>
  
  <p>Here is the html:</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div class="imgContainer"&gt;
          &lt;div class="image"&gt;
              &lt;img src="http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg"&gt;
          &lt;/div&gt;
          &lt;div class="image"&gt;
              &lt;img src="https://photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg"&gt;
          &lt;/div&gt;
          &lt;div class="image"&gt;
              &lt;img src="http://www.keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image1.jpg"&gt;
          &lt;/div&gt;
          &lt;div class="image"&gt;
              &lt;img src="http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg"&gt;
          &lt;/div&gt;
          &lt;div class="image"&gt;
              &lt;img src="https://photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg"&gt;
          &lt;/div&gt;
          &lt;div class="image"&gt;
              &lt;img src="http://www.keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image1.jpg"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the scss:</p>
  
  <pre><code>#container {
      max-width: 600px;
      margin: 0 auto;
  
      .imgContainer{
          width: 100%;
      }
  
  }
  
  .image {
      float: left;
      width: 33%;
      img {
          width: 100%;
          display: block;
      }
  }
  </code></pre>
  
  <p>I'm struggling getting white space in between the images, so that no matter where the images are, they always look evenly spaced out.</p>
  
  <p>Adding <code>padding: 5px;</code> to the <code>.image</code> class, doesn't work as it makes it so only two images can fit in the row. Why is this?</p>
  
  <p>I understand that this jsfiddle, at the moment scales down the entire container when the viewport is resized, however I'm going to implement media queries so that the images go up to 50% size etc.. on smaller viewports and therefore, two images would be on the row instead of three.</p>
  
  <p>So, with this in mind, what would be the most effective way to create this layout, so that the images have nice even padding between them, no matter what the viewport size is. What I've tried so far doesn't work very well....it can look good on one screen size, but when they re-arrange for another viewport size, the white space looks uneven. </p>
  
  <p>Here is a breakdown of what I mean with the viewport sizes:</p>
  
  <p>Large screens: three images on each row...there is a gap between the center and side images...there is a gap between each row. These gaps are the same amount.</p>
  
  <p>Smaller screens: two images on each row...there is a gap between the two images...there is a gap between each row</p>
  
  <p>mobile screens: one image per row....there is only a gap below and above each image</p>
  
  <p>Hope this makes sense.</p>
  
  <p>Thanks in advance.</p>