title: Centered Grid - Inner Grid align left - NO Javascript - NO Medias Queries
body: <p>[EDIT]</p>
  
  <p>I'm looking for a solution without javascript, and without medias queries (user can change the container size).</p>
  
  <p>[/EDIT]</p>
  
  <p>I need to create a grid of items. </p>
  
  <ol>
  <li>The container has a flexible width.</li>
  <li>The grid is always centered</li>
  <li>Items inside the grid need to be left aligned</li>
  </ol>
  
  <p>Pretty simple, but I can't find the solution !!</p>
  
  <p>Here is an image that present what I need:</p>
  
  <p><img src="https://i.stack.imgur.com/zT8Mz.jpg" alt="enter image description here"></p>
  
  <p>And here is a jsfiddle : <a href="http://jsfiddle.net/5e4bcc9L/1/" rel="nofollow noreferrer">http://jsfiddle.net/5e4bcc9L/1/</a></p>
  
  <p>HTML :</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="grid"&gt; 
           &lt;a href="#"&gt;&lt;/a&gt;
           &lt;a href="#"&gt;&lt;/a&gt;
           &lt;a href="#"&gt;&lt;/a&gt;
           &lt;a href="#"&gt;&lt;/a&gt;
           &lt;a href="#"&gt;&lt;/a&gt;
           &lt;a href="#"&gt;&lt;/a&gt;
           &lt;a href="#"&gt;&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS : </p>
  
  <pre><code>.container {
      width: 100%;
      background-color:#CCC;
      text-align: center;
  }
  .grid {
      background-color:#999;
      display: inline-block;
      text-align: left;
  }
  a {
      display:inline-block;
      height: 100px;
      width: 100px;
      background-color:#000;
      margin: 5px;
  }
  </code></pre>