html - 使用 CSS Grid 自动调整属性时如何完美地居中网格项？

Question

这个问题在这里已经有了答案:





Aligning grid items across the entire row/column (like flex items can)

(2 个回答)


3年前关闭。




我有这个网格:



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