如何在使用 CSS 网格自动调整 属性 时完美居中网格项目？

Question

我有这个网格：

完整代码见Codepen

问题是，由于 auto-fit 属性，当更改屏幕大小时，某些列会下降。我需要即使出现新行，所有网格项目也应该在网格容器中居中。

场景是这样的：

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;
}

<div class="about-us__container">
  <div class="about-us__item">
    <div class="about-us__block"></div>
    <div class="about-us__text">
      <h6>John Doe</h6>
      <p>BlaBla</p>
    </div>
  </div>
  <div class="about-us__item">
    <div class="about-us__block"></div>
    <div class="about-us__text">
      <h6>John Doe</h6>
      <p>BlaBla</p>
    </div>
  </div>
  <div class="about-us__item">
    <div class="about-us__block"></div>
    <div class="about-us__text">
      <h6>John Doe</h6>
      <p>BlaBla</p>
    </div>
  </div>
  <div class="about-us__item">
    <div class="about-us__block"></div>
    <div class="about-us__text">
      <h6>John Doe</h6>
      <p>BlaBla</p>
    </div>
  </div>
</div>

我尝试了很多解决方案，但其中 none 行得通。 我尝试将第四个网格项目强制放置在第二列中，但发生了这种情况：

Answer 1

我的项目中有相同的布局。

在容器上尝试：

display: flex;
flex-wrap: wrap;
justify-content: center;