如何在使用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>

我正在尝试许多解决方案，但是没有一个起作用。 我试图强制将第四个网格项放置在第二列中，但是会发生这种情况：

Answer 1

我在项目上有相同的布局。

在容器上尝试：

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