title: Aligning grid items across the entire row/column (like flex items can)
body: <p>With a flex container and <code>flex-wrap: wrap</code> set you can align overflowing items to the center using <code>justify-content: center</code>. </p>
  
  <p>Is there a way to achieve the same behaviour for overflowing grid items using CSS grid?</p>
  
  <p>I've created a pen showing the desired flex behavior</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>.container-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .container-flex .item {
    width: 33.33%;
    background: green;
    border: 1px solid;
  }
  
  .container-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  
  .container-grid .item {
    background: red;
    border: 1px solid;
  }
  
  * {
    box-sizing: border-box;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h3&gt;Flex&lt;/h3&gt;
  &lt;div class="container-flex"&gt;
    &lt;div class="item"&gt;item&lt;/div&gt;
    &lt;div class="item"&gt;item&lt;/div&gt;
    &lt;div class="item"&gt;item&lt;/div&gt;
    &lt;div class="item"&gt;item&lt;/div&gt;
    &lt;div class="item"&gt;item&lt;/div&gt;
    &lt;div class="item"&gt;item&lt;/div&gt;
    &lt;div class="item"&gt;item&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;h3&gt;Grid&lt;/h3&gt;
  &lt;div class="container-grid"&gt;
    &lt;div class="item"&gt;item&lt;/div&gt;
    &lt;div class="item"&gt;item&lt;/div&gt;
    &lt;div class="item"&gt;item&lt;/div&gt;
    &lt;div class="item"&gt;item&lt;/div&gt;
    &lt;div class="item"&gt;item&lt;/div&gt;
    &lt;div class="item"&gt;item&lt;/div&gt;
    &lt;div class="item"&gt;item&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://codepen.io/JoeHastings/pen/PeEjjR" rel="noreferrer">https://codepen.io/JoeHastings/pen/PeEjjR</a></p>