title: Flexible thumbnail grid with css
body: <p>I am trying to position thumbnails across the screen with even "padding". Here is an image illustrating the problem:</p>
  
  <p><img src="https://i.stack.imgur.com/q0rax.jpg" alt="page preview"></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Test rows&lt;/title&gt;
  
  &lt;style type="text/css"&gt;
  
      body {
          background: #121212;
          color: #fff;
      }
  
      #Container {
          background: #585858;
          margin: 0 auto;
          min-width: 1024px;
          width: 85%;
          margin-top: 50px;
  
          text-align: justify;
          -ms-text-justify: distribute-all-lines;
          text-justify: distribute-all-lines;
      }
  
      #Container a {
          vertical-align: top;
          display: inline-block;
          *display: inline;
          zoom: 1;
      }
  
      .stretch {
          width: 100%;
          display: inline-block;
          font-size: 0;
          line-height: 0;
      }
  
  
  
  
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div id="Container"&gt;
  
  &lt;a href="#"&gt;&lt;img src="http://dummyimage.com/200x120/444/fff" /&gt;&lt;/a&gt;
  &lt;a href="#"&gt;&lt;img src="http://dummyimage.com/200x120/444/fff" /&gt;&lt;/a&gt;
  &lt;a href="#"&gt;&lt;img src="http://dummyimage.com/200x120/444/fff" /&gt;&lt;/a&gt;
  &lt;a href="#"&gt;&lt;img src="http://dummyimage.com/200x120/444/fff" /&gt;&lt;/a&gt;
  &lt;a href="#"&gt;&lt;img src="http://dummyimage.com/200x120/444/fff" /&gt;&lt;/a&gt;
  &lt;a href="#"&gt;&lt;img src="http://dummyimage.com/200x120/444/fff" /&gt;&lt;/a&gt;
  &lt;a href="#"&gt;&lt;img src="http://dummyimage.com/200x120/444/fff" /&gt;&lt;/a&gt;
  &lt;a href="#"&gt;&lt;img src="http://dummyimage.com/200x120/444/fff" /&gt;&lt;/a&gt;
  &lt;a href="#"&gt;&lt;img src="http://dummyimage.com/200x120/444/fff" /&gt;&lt;/a&gt;
  &lt;a href="#"&gt;&lt;img src="http://dummyimage.com/200x120/444/fff" /&gt;&lt;/a&gt;
  &lt;a href="#"&gt;&lt;img src="http://dummyimage.com/200x120/444/fff" /&gt;&lt;/a&gt;
  &lt;a href="#"&gt;&lt;img src="http://dummyimage.com/200x120/444/fff" /&gt;&lt;/a&gt;
  &lt;span class="stretch"&gt;&lt;/span&gt;
  
  &lt;/div&gt;
  
  
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I did some research here in stackoverflow and found some usefull code to start, but I am facing a few problems. I want the images to align from left to right and not "snap" to the boders of the container when I have less images in the last rows as you see the image. </p>
  
  <p>Also I would like to have the "vertical space" between rows to be equal to the horizontal spacing between images, for now I have some vertical spacing like "3px" and I am not sure where is comming from. I am opened to js solutions if needed. Thank you</p>