title: Centering grid items in an auto-fill container
body: <p>I have set up a grid with two items. This grid can contain any number of items but two is enough for this example.</p>
  
  <h2>Background</h2>
  
  <p>In the example there are two gray boxes align to the left. Using an inspector on a wide screen (above 1000px) we can spot a third (or more) "shadow" item that fills up the rest of the space.</p>
  
  <h2>Question</h2>
  
  <p>How can I center the boxes in the grid? Like the "shadow" item(s) does not exist. </p>
  
  <p>On the <code>.grid</code> element I still want to use a grid because of the automatic media queries I don't need to write. On the wrapper, anything goes.</p>
  
  <p>Also, a fixed width is not an option.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.wrap {
    display: flex;
    flex-direction: column;
    /*justify-content: center;
        align-items: center;*/
  }
  
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    grid-gap: 1rem;
  }
  
  .item {
    background: #eee;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrap"&gt;
    &lt;div class="grid"&gt;
      &lt;div class="item"&gt;
        Item 1
      &lt;/div&gt;
      &lt;div class="item"&gt;
        Item 2
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <h2>Fiddle</h2>
  
  <p><a href="https://jsfiddle.net/1ymkg327/4/" rel="noreferrer">https://jsfiddle.net/1ymkg327/4/</a></p>