title: How to perfectly center grid-items while using CSS Grid auto-fit property?
body: <p>I have this Grid:</p>
  
  <p><a href="https://i.stack.imgur.com/mbAjy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mbAjy.png" alt="CSS Grid"></a></p>
  
  <p>You can see the full code in <a href="https://codepen.io/CarlosCordova/pen/gdmwOv" rel="nofollow noreferrer">Codepen</a></p>
  
  <p>The problem is that, due to <code>auto-fit</code> property, when changing screen size, some columns go down. I need that even if new rows appear, all the grid items should be centered in the grid container.</p>
  
  <p>This is the scenario:</p>
  
  <p><a href="https://i.stack.imgur.com/medaO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/medaO.png" alt="Scenario"></a></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>body {margin: 0}
  
  .about-us__block {
    width: 150px;
    height: 200px;
    background: yellow;
  }
  
  .about-us__container {
    background: black;
    padding: 20px 0;
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-gap: 10px;
  }
  
  .about-us__text {
    padding: 5px;
    text-align: center;
    background-color: #35306B;
    color: #ebecec;
  }
  
  .about-us__text h6 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
  }
  
  .about-us__text p {
    font-family: Helvetica;
    margin: 0;
  }
  
  .about-us__item:nth-of-type(4) {
    grid-column: 2;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="about-us__container"&gt;
    &lt;div class="about-us__item"&gt;
      &lt;div class="about-us__block"&gt;&lt;/div&gt;
      &lt;div class="about-us__text"&gt;
        &lt;h6&gt;John Doe&lt;/h6&gt;
        &lt;p&gt;BlaBla&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="about-us__item"&gt;
      &lt;div class="about-us__block"&gt;&lt;/div&gt;
      &lt;div class="about-us__text"&gt;
        &lt;h6&gt;John Doe&lt;/h6&gt;
        &lt;p&gt;BlaBla&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="about-us__item"&gt;
      &lt;div class="about-us__block"&gt;&lt;/div&gt;
      &lt;div class="about-us__text"&gt;
        &lt;h6&gt;John Doe&lt;/h6&gt;
        &lt;p&gt;BlaBla&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="about-us__item"&gt;
      &lt;div class="about-us__block"&gt;&lt;/div&gt;
      &lt;div class="about-us__text"&gt;
        &lt;h6&gt;John Doe&lt;/h6&gt;
        &lt;p&gt;BlaBla&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm trying a lot of solutions, but none of them works.
  I tried forcing the fourth grid-item to place in the 2nd column, but this occurs:
  <a href="https://i.stack.imgur.com/CLkqn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CLkqn.png" alt="."></a></p>