title: CSS Grid - Is it possible to justify center odd items in a grid
body: <p>I'm wondering if there is a solution to use Css Grid(not flexbox) to center odd items using something like Flexbox's justify-content. In the codepen below, I'd like to have the 4th and 5th items centered on desktop, and in tablet have the 5th item centered.</p>
  <p><a href="https://codepen.io/jordan-k-647/pen/LYQOyrm" rel="nofollow noreferrer">https://codepen.io/jordan-k-647/pen/LYQOyrm</a></p>
  <pre><code>&lt;section class=&quot;grid&quot;&gt;
    &lt;div class=&quot;grid-item&quot;&gt;Grid Item&lt;/div&gt;
    &lt;div class=&quot;grid-item&quot;&gt;Grid Item&lt;/div&gt;
    &lt;div class=&quot;grid-item&quot;&gt;Grid Item&lt;/div&gt;
    &lt;div class=&quot;grid-item&quot;&gt;Grid Item&lt;/div&gt;
    &lt;div class=&quot;grid-item&quot;&gt;Grid Item&lt;/div&gt;
  &lt;/section&gt;
  
  
  
  .grid {
      display: grid;
      grid-column-gap: 1.5rem;
      grid-template-columns: repeat(1, 1fr);
      max-width: 1170px;
      margin: 0 auto;
  }
  .grid-item {
    text-align: center;
    padding: 45px;
    background: royalblue;
    margin-top: 1.5rem;
    color: white;
    font-family: sans-serif;
    text-transform: uppercase;
  }
  @media only screen and (min-width: 640px) {
      .grid {
        grid-template-columns: repeat(2, 1fr);
    }
  }
  @media only screen and (min-width: 1024px) {
      .grid {
        grid-template-columns: repeat(3, 1fr);
    }
  }
  </code></pre>