如何在使用CSS Grid自适应属性时完美地居中网格项？ [重复]

Question

这个问题在这里已有答案：

• Aligning grid items across the entire row/column (like flex items can) 2回答

我有这个网格：

你可以在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;